'use client'

import { usePathname } from 'next/navigation'
import { useLang } from '@/context/LangContext'
import type { Lang } from '@/lib/i18n'
import { getAlternatePath, getLocaleForPath } from '@/lib/localeRoutes'

const LANGS: Lang[] = ['de', 'en', 'es']

interface LanguageSwitcherProps {
  /** 'landing' für die helle Pille auf der Landing-Navbar, 'seo' für die Subpage-Navbar. */
  variant?: 'landing' | 'seo'
}

export default function LanguageSwitcher({ variant = 'landing' }: LanguageSwitcherProps) {
  const pathname = usePathname() ?? '/'
  const { setLang } = useLang()
  const active = getLocaleForPath(pathname)

  const baseClass =
    variant === 'seo'
      ? 'flex items-center bg-ink-soft rounded-full px-1 py-1 text-[10px] font-bold tracking-widest'
      : 'flex items-center gap-0.5 rounded-full p-[3px] bg-white/5 border border-white/10 text-[10px] font-bold tracking-widest'

  const activeClass =
    variant === 'seo'
      ? 'bg-[#4a5c4e] text-white rounded-full px-3 py-1 block'
      : 'bg-white/15 text-white rounded-full px-3 py-1 block'

  const idleClass = 'text-white/50 hover:text-white px-3 py-1 transition-colors block'

  return (
    <div className={baseClass} role="group" aria-label="Language selector">
      {LANGS.map((code) => {
        const isActive = active === code
        return (
          <a
            key={code}
            href={getAlternatePath(pathname, code)}
            className={isActive ? activeClass : idleClass}
            aria-current={isActive ? 'true' : undefined}
            onClick={() => setLang(code)}
          >
            {code.toUpperCase()}
          </a>
        )
      })}
    </div>
  )
}