import Image from "next/image";
import Link from "next/link";
import { SITE } from "@/lib/constants";
import { isUploadAssetPath } from "@/lib/image-url";

type Props = {
  logoUrl?: string;
};

export function SiteHeader({ logoUrl = SITE.logoUrl }: Props) {
  return (
    <header className="sticky top-0 z-50 border-b border-chocolat/10 bg-cream/95 backdrop-blur-md">
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4 sm:px-6">
        <Link
          href="/#accueil"
          className="flex items-center gap-2.5 text-lg font-bold tracking-tight text-chocolat sm:gap-3 sm:text-xl"
        >
          <Image
            src={logoUrl}
            alt=""
            width={44}
            height={44}
            unoptimized={isUploadAssetPath(logoUrl)}
            className="h-9 w-9 shrink-0 sm:h-11 sm:w-11"
            priority
          />
          <span>{SITE.name}</span>
        </Link>
        <nav className="flex flex-wrap items-center justify-end gap-2 text-sm font-medium text-chocolat/90 sm:gap-6">
          <Link href="/#menu" className="rounded-full px-3 py-1.5 hover:bg-gaufre/15">
            Menu
          </Link>
          <Link
            href="/#ou-me-trouver"
            className="rounded-full px-3 py-1.5 hover:bg-gaufre/15"
          >
            Où me trouver
          </Link>
          <Link
            href="/#galerie"
            className="rounded-full px-3 py-1.5 hover:bg-gaufre/15"
          >
            Galerie
          </Link>
          <Link
            href="/#avis"
            className="rounded-full px-3 py-1.5 hover:bg-gaufre/15"
          >
            Avis
          </Link>
          <Link
            href="/#infos"
            className="rounded-full px-3 py-1.5 hover:bg-gaufre/15"
          >
            Infos
          </Link>
        </nav>
      </div>
    </header>
  );
}