'use client';

import { useState, useRef } from 'react';
import { useClickOutside } from 'use-a-hook';

export default function AccountMenu() {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);
  useClickOutside(ref, () => setOpen(false), open);
  return (
    <div ref={ref}>
      <button aria-expanded={open} onClick={() => setOpen((value) => !value)}>
        Account
      </button>
      {open && (
        <nav aria-label="Account">
          <a href="/settings">Settings</a>
        </nav>
      )}
    </div>
  );
}