"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";

const navigation = [
  ["Buy", "/buy"],
  ["Off Plan", "/off-plan"],
  ["Areas", "/areas"],
  ["About", "/about"],
  ["Blogs", "/blogs"],
  ["NIA", "/nia"],
  ["Contact Us", "/contact"],
] as const;

export function SiteHeader() {
  const pathname = usePathname();
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    function handleEscape(event: KeyboardEvent) {
      if (event.key === "Escape") setMenuOpen(false);
    }

    document.addEventListener("keydown", handleEscape);
    return () => document.removeEventListener("keydown", handleEscape);
  }, []);

  return (
    <header className="site-header">
      <div className="site-header__inner">
        <Link className="wordmark" href="/" aria-label="NYSA Realty home">
          <Image
            alt=""
            className="wordmark__image"
            height={50}
            priority
            src="/nysa-wordmark.svg"
            width={166}
          />
        </Link>
        <button
          aria-controls="primary-navigation"
          aria-expanded={menuOpen}
          className="menu-toggle"
          onClick={() => setMenuOpen((open) => !open)}
          type="button"
        >
          <span>{menuOpen ? "Close" : "Menu"}</span>
          <span className="menu-toggle__icon" aria-hidden="true">
            <i />
            <i />
          </span>
        </button>
        <nav
          aria-label="Primary navigation"
          className="primary-nav"
          data-open={menuOpen}
          id="primary-navigation"
        >
          {navigation.map(([label, href]) => (
            <Link
              aria-current={
                pathname === href || pathname.startsWith(`${href}/`)
                  ? "page"
                  : undefined
              }
              href={href}
              key={href}
              onClick={() => setMenuOpen(false)}
            >
              {label}
            </Link>
          ))}
        </nav>
      </div>
    </header>
  );
}