import { Mentions } from "../../App/Mentions";
import { useRef } from "preact/hooks";
import { useGuild } from "../../App/useGuild";

export const Description = ({ description, onInput }) => {
    const guild = useGuild();
    const input = useRef(null);

    return (
        <>
            {guild && <Mentions input={input} />}
            <label class="is-sr-only" for="embedDescription">
                Embed Description
            </label>
            <textarea
                class="discord-description message-input autoresize "
                placeholder="Embed Description..."
                maxlength={4096}
                name="embed_description"
                rows={1}
                ref={input}
                value={description}
                onInput={(ev) => {
                    onInput(ev.currentTarget.value);
                }}
            ></textarea>
        </>
    );
};
