import { useLang } from '../i18n/LanguageContext'

export function LanguageSwitcher() {
  const { lang, setLang } = useLang()
  return (
    <div className="flex items-center gap-1 rounded-xl border border-arka-border bg-arka-surface p-1 text-[11px] font-semibold">
      {(['lt', 'en'] as const).map((l) => (
        <button
          key={l}
          type="button"
          data-testid={`language-${l}`}
          aria-label={l === 'lt' ? 'Lietuvių kalba' : 'English language'}
          aria-pressed={lang === l}
          onClick={() => setLang(l)}
          className={`rounded-lg px-2.5 py-1 uppercase tracking-[0.1em] transition-colors ${
            lang === l
              ? 'bg-arka-accent text-arka-bg'
              : 'text-arka-muted hover:text-arka-text'
          }`}
        >
          {l}
        </button>
      ))}
    </div>
  )
}
