import { Reminder } from "../../../api";
import { ImagePicker } from "../ImagePicker";

type Props = {
    footer: string;
    icon: string;
    setReminder: (r: (reminder: Reminder) => Reminder) => void;
};

export const Footer = ({ footer, icon, setReminder }: Props) => (
    <div class="embed-footer-box">
        <p class="image is-20x20 customizable">
            <ImagePicker
                class="is-rounded embed_footer_url"
                url={icon}
                alt="Footer profile-like image"
                setImage={(url: string) => {
                    setReminder((reminder) => ({
                        ...reminder,
                        embed_footer_url: url,
                    }));
                }}
            ></ImagePicker>
        </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}
            value={footer}
            onInput={(ev) => {
                setReminder((reminder) => ({
                    ...reminder,
                    embed_footer: ev.currentTarget.value,
                }));
            }}
        ></textarea>
    </div>
);