import Link from "next/link";
import Logo from "@/components/logo";
import MobileNav from "@/components/header/mobile-nav";
import DesktopNav from "@/components/header/desktop-nav";
import { fetchSanityNavigation, fetchSanitySettings } from "@/sanity/lib/fetch";
import {
  getDynamicFetchOptions,
  type DynamicFetchOptions,
} from "@/sanity/lib/live";
import { NAVIGATION_QUERY_RESULT, SETTINGS_QUERY_RESULT } from "@/sanity.types";

type HeaderProps = {
  settings: SETTINGS_QUERY_RESULT;
  navigation: NAVIGATION_QUERY_RESULT;
};

export function Header({ settings, navigation }: HeaderProps) {
  return (
    <header className="w-full border-b border-brand-border/60 bg-brand-ivory/95 backdrop-blur-md transition-all duration-200">
      <div className="container flex items-center justify-between h-20">
        <Link href="/" aria-label="Vietnam Wedding Guide Home" className="flex items-center">
          <Logo settings={settings} />
        </Link>
        <div className="hidden xl:flex gap-7 items-center justify-between">
          <DesktopNav navigation={navigation} />
        </div>
        <div className="flex items-center gap-2 xl:hidden">
          <MobileNav navigation={navigation} settings={settings} />
        </div>
      </div>
    </header>
  );
}

export function HeaderFallback() {
  return (
    <header
      aria-busy
      className="w-full border-b border-brand-border/60 bg-brand-ivory/95 backdrop-blur-md"
    >
      <div className="container h-20" />
    </header>
  );
}

export async function DynamicHeader() {
  const { perspective, stega } = await getDynamicFetchOptions();
  return <CachedHeader perspective={perspective} stega={stega} />;
}

export async function CachedHeader({
  perspective,
  stega,
}: DynamicFetchOptions) {
  const [settings, navigation] = await Promise.all([
    fetchSanitySettings({ perspective, stega }),
    fetchSanityNavigation({ perspective, stega }),
  ]);

  return <Header settings={settings} navigation={navigation} />;
}