import Link from "next/link";
import LanguageSwitcher from "@/components/LanguageSwitcher";
import ThemeToggle from "@/components/ThemeToggle";
import type { Locale } from "@/lib/i18n";
import type { CommonContent } from "@/content/types";
import { getModeValue, isComingSoonMode } from "@/lib/site";

type SiteHeaderProps = {
  locale: Locale;
  common: CommonContent;
};

export default function SiteHeader({ locale, common }: SiteHeaderProps) {
  const isComingSoon = isComingSoonMode();
  const commonVariant = getModeValue(common.variants);

  return (
    <header className="site-header">
      <div className="container bar">
        <div className="brand-block">
          <Link href={`/${locale}`} className="brand">
            {common.siteTitle}
          </Link>
          <span className="brand-tagline">{commonVariant.siteTagline}</span>
        </div>

        {!isComingSoon ? (
          <nav className="header-nav" aria-label={common.navLabel}>
            <Link href={`/${locale}`}>{common.nav.home}</Link>
            <Link href={`/${locale}/about`}>{common.nav.about}</Link>
            <Link href={`/${locale}/contact`}>{common.nav.contact}</Link>
          </nav>
        ) : null}

        <div className="header-actions">
          <LanguageSwitcher locale={locale} label={common.languageSwitcherLabel} />
          <ThemeToggle
            label={common.themeToggleLabel}
            lightLabel={common.themeLight}
            darkLabel={common.themeDark}
          />
        </div>
      </div>
    </header>
  );
}