'use client';

import { useResetState } from 'use-a-hook';

export default function NicknameEditor() {
  const [nickname, setNickname, reset] = useResetState('Ada');
  return (
    <section>
      <input
        aria-label="Nickname"
        value={nickname}
        onChange={(event) => setNickname(event.target.value)}
      />
      <button onClick={reset}>Discard nickname edits</button>
    </section>
  );
}