'use client';

import Link from 'next/link';

import { useMenu } from '@/contexts/MenuContext';
import styles from './Header.module.css';

export default function Header() {
  const { isMenuOpen, closeMenu, openMenu, startClosing, resetClosing } =
    useMenu();

  const handleMenuToggle = () => {
    if (isMenuOpen) {
      startClosing();
      setTimeout(() => {
        closeMenu();
        resetClosing();
      }, 800);
    } else {
      openMenu();
    }
  };
  return (
    <header className={styles.header}>
      <div className={styles.inner}>
        <div className={styles.logo}>
          <Link href="/">◬</Link>
        </div>
        <div className={styles.pagename}>
          <span>
            dave <span className={styles.bracket}>[</span>dmg
            <span className={styles.bracket}>]</span>
          </span>
        </div>
        <div className={styles.menutoggle}>
          <button
            onClick={() => handleMenuToggle()}
            aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={isMenuOpen}
            aria-controls="main-menu"
          >
            {isMenuOpen ? '[×]' : '[⚍]'}
          </button>
        </div>
      </div>
    </header>
  );
}
