import Link from "next/link";
import Image from "next/image";
import { Globe, PhoneCall } from "lucide-react";
import type { Lang } from "@/i18n/types";
import type { Dict } from "@/i18n/dictionaries";
import { cn } from "@/lib/cn";

const navItems = [
  { key: "home", href: "" },
  { key: "services", href: "services" },
  { key: "portfolio", href: "portfolio" },
  { key: "about", href: "about" },
  { key: "contact", href: "contact" },
] as const;

export function SiteHeader({
  lang,
  dict,
}: {
  lang: Lang;
  dict: Dict;
}) {
  const otherLang: Lang = lang === "ar" ? "en" : "ar";

  return (
    <header className="sticky top-0 z-50 border-b border-appBorder bg-app/60 backdrop-blur">
      <div className="container-app flex h-16 items-center justify-between gap-4">
        <Link
          href={`/${lang}`}
          className="group flex shrink-0 items-center"
          aria-label={dict.brand}
        >
          <Image
            src="/logo.png"
            alt={dict.brand}
            width={220}
            height={56}
            className="h-10 w-auto max-w-[min(220px,52vw)] object-contain object-start sm:h-11 sm:max-w-[240px]"
            priority
          />
        </Link>

        <nav className="hidden items-center gap-1 md:flex">
          {navItems.map((item) => {
            const label = dict.nav[item.key as keyof Dict["nav"]];
            const href = item.href ? `/${lang}/${item.href}` : `/${lang}`;
            return (
              <Link
                key={item.key}
                href={href}
                className="rounded-xl px-3 py-2 text-sm font-medium text-appMuted transition hover:bg-white/5 hover:text-appText"
              >
                {label}
              </Link>
            );
          })}
        </nav>

        <div className="flex items-center gap-2">
          <Link
            href={`/${lang}/contact`}
            className={cn("btn btn-secondary hidden sm:inline-flex")}
          >
            <PhoneCall className="h-4 w-4" />
            {dict.nav.contact}
          </Link>

          <Link
            href={`/${otherLang}`}
            className={cn("btn btn-secondary")}
            aria-label={lang === "ar" ? "Switch to English" : "التبديل للعربية"}
          >
            <Globe className="h-4 w-4" />
            {lang === "ar" ? "EN" : "AR"}
          </Link>
        </div>
      </div>
    </header>
  );
}