import { getHomepageContent } from '@/lib/homepage-content';
import { Logo } from './Logo';
import { Navigation } from './Navigation';
import { MobileMenu } from './MobileMenu';
import { StickyHeaderWrapper } from './StickyHeaderWrapper';

import { NavNode } from '@/lib/navigation';

interface HeaderProps {
  navigationTree: NavNode[];
}

async function getSiteHeaderProps() {
  try {
    const data = await getHomepageContent();
    const content = data?.puckData?.content as any[] | undefined;
    const headerBlock = content?.find((b: any) => b.type === 'SiteHeader');
    return { logo: headerBlock?.props?.logo || null };
  } catch {
    return { logo: null };
  }
}

export async function Header({ navigationTree }: HeaderProps) {
  const { logo } = await getSiteHeaderProps();

  return (
    <StickyHeaderWrapper>
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <Logo src={logo ?? '/logo.png'} />

          {/* Desktop Navigation */}
          <Navigation className="hidden lg:flex" navigationTree={navigationTree} />

          {/* Mobile Menu */}
          <MobileMenu className="lg:hidden" navigationTree={navigationTree} />
        </div>
      </div>
    </StickyHeaderWrapper>
  );
}
