import { ImagePicker } from "./ImagePicker";
import { Username } from "./Username";
import { Content } from "./Content";
import { Embed } from "./Embed";
import { useReminder } from "./ReminderContext";

export const Message = () => {
    const [reminder, setReminder] = useReminder();

    return (
        <div class="column discord-frame">
            <article class="media">
                <figure class="media-left">
                    <p class="image is-32x32 customizable">
                        <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>
                    </p>
                </figure>
                <div class="media-content">
                    <div class="content">
                        <Username />
                        <Content />
                        <Embed />
                    </div>
                </div>
            </article>
        </div>
    );
};
