"use client";

import HeaderCta from "@/components/header/HeaderCta";
import { useMobileMenu } from "@/components/header/mobile-menu-context";
import { useNavItems } from "@/components/header/nav-items-context";
import { Link } from "@/i18n/navigation";
import { cn } from "@/lib/utils";

type Props = {
  /** Accessible name of the panel's `<nav>` landmark ("Main menu"). */
  menuTitle: string;
};

export default function MobileMenuPanel({ menuTitle }: Props) {
  const { open, close } = useMobileMenu();
  const { items, currentPath } = useNavItems();

  return (
    <nav
      id="mobile-menu-panel"
      aria-label={menuTitle}
      className={cn(
        // max-h + overflow-y-auto: keeps the panel scrollable inside the fixed
        // header on short viewports and lets iOS Safari handle the keyboard.
        // The bound MUST be the static `--spacing-header` token, never the
        // runtime `--header-h`: this panel lives inside the <header> that
        // HeaderShell measures with a ResizeObserver, so `--header-h` includes
        // the open panel and bounding the panel on it oscillates (panel shrinks
        // -> header shrinks -> bound grows -> panel grows -> ...). Below `nav:`
        // the bar is exactly `--spacing-header` tall, scrolled or not.
        "max-h-[calc(100dvh-var(--spacing-header))] flex-col overflow-y-auto overscroll-contain border-t border-hairline bg-background/98 px-6 pt-2 pb-6 backdrop-blur-header nav:hidden",
        open ? "flex" : "hidden",
      )}
    >
      {items.map((item) => (
        <Link
          key={String(item.href)}
          href={item.href}
          onClick={close}
          aria-current={item.href === currentPath ? "page" : undefined}
          className="border-b border-surface-container-highest py-4 text-label-lg font-semibold uppercase text-foreground motion-safe:transition-colors hover:text-gold-text"
        >
          {item.label}
        </Link>
      ))}
      <HeaderCta onClick={close} className="mt-5 w-full py-4" />
    </nav>
  );
}