'use client'

import { useLang } from '@/lib/useLang'
import type { Lang } from '@/lib/i18n'
import styles from './topbar.module.css'

/** RU / EN switch. The choice is stored under the key shared with the rest of shanaty.ru. */
export default function LangSwitch() {
  const lang = useLang()
  const choose = (next: Lang) => {
    const html = document.documentElement
    html.dataset.lang = next
    html.lang = next
    document.title = html.getAttribute(`data-title-${next}`) ?? document.title
    try {
      localStorage.setItem('lang', next)
    } catch {
      // Storage can be blocked; the language still changes for this visit.
    }
    window.dispatchEvent(new Event('langchange'))
  }
  return (
    <div className={styles.seg} role="group" aria-label={lang === 'ru' ? 'Язык' : 'Language'}>
      {(['ru', 'en'] as const).map((code) => (
        <button key={code} type="button" aria-pressed={lang === code} onClick={() => choose(code)}>
          {code.toUpperCase()}
        </button>
      ))}
    </div>
  )
}