import { Languages } from 'lucide-react';
import { useI18n, type Language } from '@/i18n/i18n';
import { cn } from '@/lib/cn';

const languages: Array<{ value: Language; label: string }> = [
  { value: 'ru', label: 'RU' },
  { value: 'en', label: 'EN' },
];

export function LanguageSwitcher({ className }: { className?: string }) {
  const { language, setLanguage, t } = useI18n();

  return (
    <div
      className={cn(
        'inline-flex items-center gap-1 rounded-md border border-border bg-surface/90 p-1 text-xs shadow-card',
        className,
      )}
      aria-label={t('language.switch')}
    >
      <Languages className="ml-1 h-3.5 w-3.5 text-muted" aria-hidden />
      {languages.map((item) => (
        <button
          key={item.value}
          type="button"
          onClick={() => setLanguage(item.value)}
          className={cn(
            'rounded px-2 py-1 font-semibold transition-colors',
            language === item.value
              ? 'bg-primary text-primary-foreground'
              : 'text-muted hover:bg-surface-muted hover:text-ink',
          )}
          aria-pressed={language === item.value}
          title={item.value === 'ru' ? t('language.ru') : t('language.en')}
        >
          {item.label}
        </button>
      ))}
    </div>
  );
}