import { Author } from "./Author";
import { Title } from "./Title";
import { Description } from "./Description";

export const Embed = ({ reminder }) => {
    return (
        <div class="discord-embed">
            <div class="embed-body">
                <button class="change-color button is-rounded is-small">
                    <span class="is-sr-only">Choose embed color</span>
                    <i class="fas fa-eye-dropper"></i>
                </button>
                <div class="a">
                    <Author name={reminder.embed_author} icon={reminder.embed_author_url}></Author>
                    <Title title={reminder.embed_title}></Title>
                    <br></br>
                    <Description description={reminder.embed_description}></Description>
                    <br></br>

                    <div class="embed-multifield-box">
                        <div data-inlined="1" class="embed-field-box">
                            <label class="is-sr-only" for="embedFieldTitle">
                                Field Title
                            </label>
                            <div class="is-flex">
                                <textarea
                                    class="discord-field-title field-input message-input autoresize"
                                    placeholder="Field Title..."
                                    rows={1}
                                    maxlength={256}
                                    name="embed_field_title[]"
                                ></textarea>
                                <button class="button is-small inline-btn">
                                    <span class="is-sr-only">Toggle field inline</span>
                                    <i class="fas fa-arrows-h"></i>
                                </button>
                            </div>

                            <label class="is-sr-only" for="embedFieldValue">
                                Field Value
                            </label>
                            <textarea
                                class="discord-field-value field-input message-input autoresize "
                                placeholder="Field Value..."
                                maxlength={1024}
                                name="embed_field_value[]"
                                rows={1}
                            ></textarea>
                        </div>
                    </div>
                </div>

                <div class="b">
                    <p class="image thumbnail customizable">
                        <a>
                            <img
                                class="embed_thumbnail_url"
                                src="/static/img/bg.webp"
                                alt="Square thumbnail embedded image"
                            ></img>
                        </a>
                    </p>
                </div>
            </div>

            <p class="image is-400x300 customizable">
                <a>
                    <img
                        class="embed_image_url"
                        src="/static/img/bg.webp"
                        alt="Large embedded image"
                    ></img>
                </a>
            </p>

            <div class="embed-footer-box">
                <p class="image is-20x20 customizable">
                    <a>
                        <img
                            class="is-rounded embed_footer_url"
                            src="/static/img/bg.webp"
                            alt="Footer profile-like image"
                        ></img>
                    </a>
                </p>

                <label class="is-sr-only" for="embedFooter">
                    Embed Footer text
                </label>
                <textarea
                    class="discord-embed-footer message-input autoresize "
                    placeholder="Embed Footer..."
                    maxlength={2048}
                    name="embed_footer"
                    rows={1}
                ></textarea>
            </div>
        </div>
    );
};