LanguageSwitcher.jsx

import { useTranslation } from 'react-i18next';

const LANGS = [
  { code: 'es', label: 'ES' },
  { code: 'en', label: 'EN' },
  { code: 'zh', label: '中' }
];

export default function LanguageSwitcher() {
  const { i18n } = useTranslation();
  const current = (i18n.resolvedLanguage || i18n.language || 'es').slice(0, 2);

  return (
    <div className="lang" aria-label="Language switcher">
      {LANGS.map((l, idx) => (
        <span key={l.code} style={{ display: 'inline-flex', alignItems: 'center' }}>
          <button
            type="button"
            className={current === l.code ? 'active' : ''}
            onClick={() => i18n.changeLanguage(l.code)}
            aria-label={`Switch to ${l.label}`}
          >
            {l.label}
          </button>
          {idx < LANGS.length - 1 && <span className="lang__sep">·</span>}
        </span>
      ))}
    </div>
  );
}