import { CalendarDays, Menu } from "lucide-react";
import { buttonVariants } from "@/components/ui/button";
import { LocaleSwitcher } from "@/components/locale-switcher";
import { Link } from "@/i18n/navigation";
import { publicPages } from "@/config/site";
import { cn } from "@/lib/utils";

type SiteHeaderProps = {
  labels: Record<string, string>;
};

export function SiteHeader({ labels }: SiteHeaderProps) {
  return (
    <header className="sticky top-0 z-40 border-b bg-background/94 backdrop-blur-md">
      <div className="mx-auto flex min-h-14 w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
        <Link href="/" className="flex flex-col leading-none">
          <span className="text-xl font-semibold tracking-tight">
            Alya Paros
          </span>
          <span className="text-[0.62rem] font-medium uppercase tracking-[0.22em] text-muted-foreground">
            Cycladic home
          </span>
        </Link>

        <nav className="hidden items-center gap-1 lg:flex" aria-label="Main">
          {publicPages.slice(0, 5).map((page) => (
            <Link
              key={page.slug}
              href={`/${page.slug}`}
              className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
            >
              {labels[page.labelKey]}
            </Link>
          ))}
        </nav>

        <div className="flex items-center gap-2">
          <LocaleSwitcher />
          <Link
            href="/availability-booking"
            className={cn(buttonVariants({ size: "lg" }), "hidden sm:flex")}
          >
            <CalendarDays data-icon="inline-start" />
            {labels.booking}
          </Link>
          <Link
            href="/availability-booking"
            className={cn(buttonVariants({ size: "icon-lg", variant: "outline" }), "lg:hidden")}
            aria-label={labels.booking}
          >
            <Menu />
          </Link>
        </div>
      </div>
    </header>
  );
}