import { useReminder } from "./ReminderContext";

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

    return (
        <div class="name-bar">
            <div class="field">
                <div class="control">
                    <label class="label sr-only">Reminder Name</label>
                    <input
                        class="input"
                        type="text"
                        name="name"
                        placeholder="Reminder Name"
                        maxlength={100}
                        value={reminder.name}
                        onInput={(ev) => {
                            setReminder((reminder) => ({
                                ...reminder,
                                name: ev.currentTarget.value,
                            }));
                        }}
                    ></input>
                </div>
            </div>
        </div>
    );
};