'use client';
import { Container } from '@/src/components/container';
import { BrandLogo } from '../../../brand-logo';
import { ContactBox } from './contact-box';
import { useStickyHeader } from '../../utils/use-sticky-header';
import { cn } from '@/src/utils/shadcn';
import { Navigation } from '../common/navigation';
import { headerData } from 'data/layout/header/v1';

export function Header() {
  const { menuItems, contactInfo } = headerData;
  const isSticky = useStickyHeader(700);

  return (
    <header
      className={cn(
        'left-0 right-0 top-0 z-99 mx-auto hidden w-full py-[10px] lg:block',
        isSticky
          ? 'left-bg-white0 fixed top-0 w-full bg-white/90 shadow-md backdrop-blur-md dark:bg-accent-900/90'
          : 'absolute bg-white/70'
      )}
    >
      <Container>
        <div className="flex items-center justify-between gap-x-10">
          <div className="flex-none">
            <BrandLogo />
          </div>

          {menuItems && menuItems.length > 0 && (
            <Navigation menuItems={menuItems} isSticky={isSticky} />
          )}

          <ContactBox {...contactInfo} />
        </div>
      </Container>
    </header>
  );
}