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";
import { getAllRehberler } from "@/lib/rehber";

export function SiteHeader() {
  return (
    <header className="sticky top-4 z-50 mt-4 sm:top-6 sm:mt-6 print:hidden">
      <div className="relative mx-auto flex h-12 max-w-6xl items-center justify-between gap-2 px-3 sm:h-16 sm:gap-3 sm:px-4">
        <Link
          href="/"
          className="group 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={getAllRehberler()} />
        {/* UserNav session+DB bekler; Suspense dışına taşarsa tüm kabuk bloklanır */}
        <Suspense fallback={<UserNavFallback />}>
          <UserNav />
        </Suspense>
      </div>
    </header>
  );
}
