"use client";

import { Mail, Menu, Radio, X } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import { clientNavigationLinks } from "../content/navigation";

export function BusinessHeader() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const pathname = usePathname();

  const closeMenu = () => setIsMenuOpen(false);
  const isCurrentLink = (href: string) => !href.includes("#") && pathname === href;

  return (
    <header className="business-header">
      <Link
        className="header-brand"
        href="/"
        aria-label="Pop Media acasa"
        onClick={closeMenu}
      >
        <Radio aria-hidden="true" />
        <span>Pop Media</span>
      </Link>
      <nav className="header-nav" aria-label="Navigatie principala">
        {clientNavigationLinks.map((link) => {
          const isCurrent = isCurrentLink(link.href);

          return (
            <Link
              aria-current={isCurrent ? "page" : undefined}
              className={isCurrent ? "is-current" : undefined}
              href={link.href}
              key={link.href}
              onClick={closeMenu}
            >
              {link.label}
            </Link>
          );
        })}
      </nav>
      <div className="header-controls">
        <button
          className="header-menu-button"
          type="button"
          aria-controls="business-header-menu"
          aria-expanded={isMenuOpen}
          aria-label={isMenuOpen ? "Inchide meniul Pop Media" : "Deschide meniul Pop Media"}
          title={isMenuOpen ? "Inchide meniul" : "Deschide meniul"}
          onClick={() => setIsMenuOpen((current) => !current)}
        >
          {isMenuOpen ? <X aria-hidden="true" /> : <Menu aria-hidden="true" />}
        </button>
        <Link className="header-action" href="/contact" onClick={closeMenu}>
          <Mail aria-hidden="true" />
          Contact
        </Link>
      </div>
      <nav
        id="business-header-menu"
        className="header-menu-panel"
        data-open={isMenuOpen ? "true" : "false"}
        aria-label="Meniu Pop Media"
      >
        {clientNavigationLinks.map((link) => {
          const isCurrent = isCurrentLink(link.href);

          return (
            <Link
              aria-current={isCurrent ? "page" : undefined}
              className={isCurrent ? "is-current" : undefined}
              href={link.href}
              key={link.href}
              onClick={closeMenu}
            >
              {link.label}
            </Link>
          );
        })}
      </nav>
    </header>
  );
}