import Link from "next/link";
import { LanguageSwitcher } from "@/components/language-switcher";
import { Mark } from "@/components/mark";
import type { Dictionary } from "@/i18n/dictionaries";
import { publicPath, type Locale } from "@/i18n/routes";

export function SiteHeader({ locale, dict }: { locale: Locale; dict: Dictionary }) {
  const links = [
    [dict.nav.work, publicPath(locale, "work")],
    [dict.nav.about, publicPath(locale, "about")],
    [dict.nav.notes, publicPath(locale, "notes")],
    [dict.nav.contact, publicPath(locale, "contact")],
  ] as const;

  return (
    <header className="sticky top-0 z-20 border-b border-line bg-ink/80 backdrop-blur-md">
      <div className="mx-auto flex w-full max-w-6xl flex-wrap items-center justify-between gap-4 px-6 py-4 md:px-10">
        <Link href={publicPath(locale, "home")} className="flex items-center gap-3 text-copper">
          <Mark />
          <span className="font-mono text-sm tracking-[0.28em]">W-MAKE</span>
        </Link>
        <div className="flex flex-wrap items-center gap-5 md:gap-8">
          <nav aria-label="Hauptnavigation" className="flex flex-wrap items-center gap-4 text-sm md:gap-6">
            {links.map(([label, href]) => (
              <Link key={href} href={href} className="link-quiet">
                {label}
              </Link>
            ))}
          </nav>
          <LanguageSwitcher locale={locale} dict={dict} />
        </div>
      </div>
    </header>
  );
}