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

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

    return (
        <>
            {guild && <Mentions input={input} />}
            <label class="is-sr-only" for="embedTitle">
                Embed Title
            </label>
            <textarea
                class="discord-title message-input  autoresize"
                placeholder="Embed Title..."
                maxlength={256}
                rows={1}
                ref={input}
                name="embed_title"
                value={title}
                onInput={(ev) => {
                    onInput(ev.currentTarget.value);
                }}
            ></textarea>
        </>
    );
};