import { useReminder } from "./ReminderContext";

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

    return (
        <div class="discord-message-header">
            <label class="is-sr-only">Username Override</label>
            <input
                class="discord-username message-input"
                placeholder="Username Override"
                maxlength={32}
                name="username"
                value={reminder.username || "Reminder"}
                onBlur={(ev) => {
                    setReminder((reminder) => ({
                        ...reminder,
                        username: ev.currentTarget.value,
                    }));
                }}
            ></input>
        </div>
    );
};