import Link from 'next/link'

type Dict = {
  header: { tagline: string }
  langSwitch: { current: string; other: string; otherHref: string }
}

export default function Header({ dict }: { dict: Dict }) {
  return (
    <header
      className="fixed top-0 left-0 right-0 z-40 bg-coffee"
      style={{ height: 'var(--header-h)' }}
    >
      {/* Thin teal accent line at bottom */}
      <div className="absolute bottom-0 left-0 right-0 h-px bg-teal opacity-40" />

      <div className="flex items-center justify-between h-full px-5">
        {/* Logo */}
        <div className="flex flex-col leading-none">
          <span className="font-display text-cream text-xl font-semibold tracking-[0.18em] uppercase">
            KOZMOS
          </span>
          <span className="font-body text-teal text-[0.6rem] font-medium tracking-[0.22em] uppercase mt-0.5">
            {dict.header.tagline}
          </span>
        </div>

        {/* Language switcher */}
        <Link
          href={dict.langSwitch.otherHref}
          className="flex items-center gap-1.5 group"
          aria-label={`Switch to ${dict.langSwitch.other}`}
        >
          <span className="font-body text-xs font-semibold text-cream/40 tracking-wider">
            {dict.langSwitch.current}
          </span>
          <span className="font-body text-xs text-cream/20">·</span>
          <span className="font-body text-xs font-semibold text-teal tracking-wider group-hover:text-cream transition-colors duration-200">
            {dict.langSwitch.other}
          </span>
        </Link>
      </div>
    </header>
  )
}