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

export function SiteHeader() {
  return (
    <header className="sticky top-4 z-50 mt-4 sm:top-6 sm:mt-6 print:hidden">
      {/* lg altında 2 satır: logo+UserNav / sıralama+ara. lg+: tek satır, ortada nav. */}
      <div className="relative mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-x-2 gap-y-2 px-3 sm:gap-x-3 sm:px-4 lg:h-16 lg:flex-nowrap">
        <Link
          href="/"
          aria-label="KolayTercih"
          className="group order-1 flex min-w-0 shrink items-center font-bricolage"
        >
          <Image
            src="/kolay-tercih-mark.svg"
            alt=""
            width={44}
            height={44}
            aria-hidden="true"
            className="size-8 shrink-0 sm:size-11"
          />
          <span className="truncate">
            <span className="text-lg font-light tracking-tighter sm:text-3xl">
              Kolay
            </span>
            <span className="text-lg font-semibold tracking-tighter sm:text-3xl">
              Tercih
            </span>
          </span>
        </Link>
        <KatalogArama rehberler={getRehberAramaKayitlari()} />
        {/* UserNav session+DB bekler; Suspense dışına taşarsa tüm kabuk bloklanır */}
        <Suspense fallback={<UserNavFallback />}>
          <UserNav />
        </Suspense>
      </div>
    </header>
  );
}