"use client";

import { useEffect, useState } from "react";

export default function PortfolioHeader() {
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    if (!menuOpen) return;
    function handleKeyDown(event: KeyboardEvent) {
      if (event.key === "Escape") setMenuOpen(false);
    }
    document.addEventListener("keydown", handleKeyDown);
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [menuOpen]);

  return (
    <header className={`masthead${menuOpen ? " masthead--menu-open" : ""}`}>
      <a className="wordmark" href="/" aria-label="JUNX DESIGN, về trang chủ">JUNX <span>DESIGN</span></a>
      <button className={`menu-backdrop${menuOpen ? " is-open" : ""}`} type="button" aria-label="Đóng menu" aria-hidden={!menuOpen} tabIndex={menuOpen ? 0 : -1} onClick={() => setMenuOpen(false)} />
      <nav id="portfolio-mobile-navigation" className={`main-nav ${menuOpen ? "is-open" : ""}`} aria-label="Điều hướng chính">
        <div className="main-nav__items">
        <a href="/" onClick={() => setMenuOpen(false)}>Trang chủ</a>
        <a href="/#work" onClick={() => setMenuOpen(false)}>Tác phẩm</a>
        <a href="/#contact" onClick={() => setMenuOpen(false)}>Liên hệ</a>
        </div>
      </nav>
      <button className="menu-toggle" aria-expanded={menuOpen} aria-controls="portfolio-mobile-navigation" aria-label={menuOpen ? "Đóng menu" : "Mở menu"} onClick={() => setMenuOpen(!menuOpen)}>
        <span /><span />
      </button>
    </header>
  );
}