import React from 'react';
import { useTranslation } from '@/hooks/useI18n.tsx';

const LanguageSwitcher = () => {
  const { lang, setLang, t } = useTranslation();

  const baseClasses = 'px-3 py-1 text-sm font-medium rounded-md transition-colors';
  const activeClasses = 'bg-primary/20 text-primary';
  const inactiveClasses = 'hover:bg-muted';

  return (
    <div className="flex items-center gap-1 p-1 rounded-lg bg-muted border">
      <button
        onClick={() => setLang('en')}
        className={`${baseClasses} ${lang === 'en' ? activeClasses : inactiveClasses}`}
        aria-pressed={lang === 'en'}
      >
        {t('lang.en')}
      </button>
      <button
        onClick={() => setLang('ru')}
        className={`${baseClasses} ${lang === 'ru' ? activeClasses : inactiveClasses}`}
        aria-pressed={lang === 'ru'}
      >
        {t('lang.ru')}
      </button>
      <button
        onClick={() => setLang('tt')}
        className={`${baseClasses} ${lang === 'tt' ? activeClasses : inactiveClasses}`}
        aria-pressed={lang === 'tt'}
      >
        {t('lang.tt')}
      </button>
    </div>
  );
};

export default LanguageSwitcher;