import Link from "next/link";
import { Menu } from "lucide-react";
import type { NavLink } from "@/lib/wp/menus";
import type { SiteSettings } from "@/lib/wp/site";
import { LanguageSwitcher } from "./LanguageSwitcher";
import { localizeHref, type Locale } from "@/lib/i18n/config";

interface SiteHeaderProps {
  nav: ReadonlyArray<NavLink>;
  site: SiteSettings;
  locale: Locale;
  pathname: string;
  /** Active search string (e.g. "?service=events"); preserved when switching language. */
  search?: string;
}

export function SiteHeader({ nav, site, locale, pathname, search = "" }: SiteHeaderProps) {
  const homeHref = localizeHref("/", locale);
  const contactHref = localizeHref("/contact", locale);

  return (
    <header className="site-header" data-screen-label="00 Header">
      <div className="row">
        <Link href={homeHref} className="brand-mark" aria-label="Backyard Tours & Events">
          <img className="logo-img" src="/assets/logo.png" alt="Backyard Tours & Events" />
        </Link>
        <nav className="nav-main">
          {nav.map((item) => (
            <Link key={item.href} data-nav href={localizeHref(item.href, locale)}>
              {item.label}
            </Link>
          ))}
        </nav>
        <div className="nav-actions">
          <LanguageSwitcher currentLocale={locale} pathname={pathname} search={search} variant="header" />
          {site.labels.cta_book ? (
            <Link href={contactHref} className="btn btn-primary">
              {site.labels.cta_book}
            </Link>
          ) : null}
          <button
            className="menu-toggle"
            aria-label={site.labels.menu_toggle || undefined}
            type="button"
          >
            <Menu width={20} height={20} aria-hidden />
          </button>
        </div>
      </div>
    </header>
  );
}