import BrandLogo from "@/components/BrandLogo";
import HeaderCta from "@/components/header/HeaderCta";
import MobileMenuPanel from "@/components/header/MobileMenuPanel";
import type { NavItem as HeaderNavItem } from "@/components/header/nav-items-context";
import HeaderNavBar from "@/components/HeaderNavBar";
import HeaderShell from "@/components/HeaderShell";
import LanguageSelect from "@/components/LanguageSelect";
import MobileMenu from "@/components/MobileMenu";
import { Link } from "@/i18n/navigation";
import { useTranslations } from "next-intl";
import type { ComponentProps } from "react";

type NavKey =
  | "aboutUs"
  | "production"
  | "designDevelopment"
  | "gallery"
  | "events"
  | "sustainability"
  | "blog"
  | "contactUs";

type NavItem = {
  key: NavKey;
  href: ComponentProps<typeof Link>["href"];
};

const primaryNav: ReadonlyArray<NavItem> = [
  { key: "aboutUs", href: "/about-us" },
  { key: "production", href: "/production-process" },
  { key: "designDevelopment", href: "/design-development" },
  { key: "gallery", href: "/gallery" },
  { key: "events", href: "/news-events" },
  { key: "sustainability", href: "/sustainability" },
  { key: "blog", href: "/blog" },
];

const ctaNav: NavItem = { key: "contactUs", href: "/contact-us" };

export default function Header() {
  const tNav = useTranslations("Header.nav");
  const tHeader = useTranslations("Header");
  const tCommon = useTranslations("Common");

  // Serialised once, into HeaderShell's context: the bar, the mobile panel and
  // the CTA all read it from there instead of receiving their own copy.
  const navItems: ReadonlyArray<HeaderNavItem> = primaryNav.map((item) => ({
    href: item.href,
    label: tNav(item.key),
  }));
  const ctaItem: HeaderNavItem = { href: ctaNav.href, label: tNav(ctaNav.key) };

  return (
    <HeaderShell
      label={tHeader("globalLabel")}
      items={navItems}
      cta={ctaItem}
      panel={<MobileMenuPanel menuTitle={tHeader("menuTitle")} />}
    >
      <div className="flex shrink-0">
        <BrandLogo />
      </div>

      <HeaderNavBar />

      <div className="flex shrink-0 items-center justify-end gap-x-2.5">
        <LanguageSelect />
        <HeaderCta className="hidden nav:inline-flex" />
        <MobileMenu openLabel={tHeader("openMenu")} closeLabel={tCommon("close")} />
      </div>
    </HeaderShell>
  );
}