import { Suspense } from "react";
import Image from "next/image";
import Link from "next/link";
import { KatalogArama } from "@/components/katalog-arama";
import { UserNav, UserNavFallback } from "@/components/user-nav";

export function SiteHeader() {
  return (
    <header className="sticky top-6 z-50 mt-6 print:hidden">
      <div className="relative mx-auto flex h-16 max-w-6xl items-center justify-between gap-3 px-4">
        <Link
          href="/"
          className="group flex items-center font-bricolage text-xl"
        >
          <Image
            src="/kolay-tercih-mark.svg"
            alt=""
            width={44}
            height={44}
            aria-hidden="true"
            className="size-11 shrink-0"
          />
          <span>
            <span className="font-light text-3xl tracking-tighter">Kolay</span>
            <span className="font-semibold text-3xl tracking-tighter">
              Tercih
            </span>
          </span>
        </Link>
        <KatalogArama />
        {/* UserNav session+DB bekler; Suspense dışına taşarsa tüm kabuk bloklanır */}
        <Suspense fallback={<UserNavFallback />}>
          <UserNav />
        </Suspense>
      </div>
    </header>
  );
}