import { useTranslations } from 'next-intl';
import { LanguageAlternative, SiteSettings } from '#web-runtime/types';
import { Link } from '#i18n/navigation';
import HeaderNav from './HeaderNav';

export default function SiteHeader({
  settings,
  languageAlternatives
}: {
  settings: SiteSettings;
  languageAlternatives: LanguageAlternative[];
}) {
  const t = useTranslations('Components.Navigation');

  return (
    <header className="relative z-20 border-b border-[#172019]/10 bg-[#f4f1e9]/92 backdrop-blur-2xl">
      <div className="mx-auto flex min-h-20 w-[min(calc(100%-2rem),76rem)] items-center gap-8 max-lg:gap-4 max-[45rem]:w-[min(calc(100%-1.25rem),76rem)]">
        <Link
          className="shrink-0 text-lg font-extrabold tracking-[-0.06em] focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#99d900]"
          href="/"
          aria-label={t('home')}
        >
          CRUX
          <span className="text-[#99d900]" aria-hidden="true">
            .
          </span>
        </Link>

        <HeaderNav
          menus={settings.header.menus}
          ctaItems={settings.header.ctaItems}
          languageAlternatives={languageAlternatives}
        />
      </div>
    </header>
  );
}