import { Suspense } from "react";
import Link from "next/link";
import { AnimasyonluMark } from "@/components/animasyonlu-mark";
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"
        >
          {/* Inline animasyonlu mark: Link'teki `group` sayesinde hover'da
              kareler danışman panelindeki nabız animasyonuyla canlanır. */}
          <AnimasyonluMark sadeceHover className="size-8 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>
  );
}