import { getTranslations } from "next-intl/server";
import Image from "next/image";
import { Link } from "@/i18n/navigation";
import { LanguageSwitcher } from "@/components/LanguageSwitcher";

export async function Header() {
  const t = await getTranslations("nav");

  const links = [
    { href: "/", label: t("home") },
    { href: "/gallery", label: t("gallery") },
    { href: "/reserve", label: t("reserve") },
    { href: "/about", label: t("about") },
    { href: "/contact", label: t("contact") },
  ] as const;

  return (
    <header className="sticky top-0 z-50 border-b border-border/80 bg-background/85 backdrop-blur-md">
      <div className="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-4 px-4 py-4 md:px-6">
        <Link href="/" className="flex items-center gap-3">
          <Image
            src="/logo.png"
            alt="Rizz Lounge"
            width={140}
            height={48}
            className="h-10 w-auto md:h-12"
            priority
          />
        </Link>
        <nav className="flex flex-wrap items-center gap-1 md:gap-2">
          {links.map(({ href, label }) => (
            <Link
              key={href}
              href={href}
              className="rounded-md px-3 py-2 text-sm text-foreground/90 transition hover:bg-card hover:text-gold"
            >
              {label}
            </Link>
          ))}
          <Link
            href="/admin"
            className="rounded-md border border-border px-3 py-2 text-sm text-muted transition hover:border-gold hover:text-gold"
          >
            {t("admin")}
          </Link>
          <LanguageSwitcher />
        </nav>
      </div>
    </header>
  );
}