import { ImagePicker } from "./ImagePicker";
import { useReminder } from "./ReminderContext";
import { useGuild } from "../App/useGuild";

export const Avatar = () => {
    const guild = useGuild();
    const [reminder, setReminder] = useReminder();

    return guild ? (
        <ImagePicker
            class="is-rounded avatar"
            url={reminder.avatar || "/static/img/icon.png"}
            alt="Image for discord avatar"
            setImage={(url: string) => {
                setReminder((reminder) => ({
                    ...reminder,
                    avatar: url,
                }));
            }}
        ></ImagePicker>
    ) : (
        <img
            class="is-rounded avatar"
            alt="Image for discord avatar"
            src={"/static/img/icon.png"}
        ></img>
    );
};