import { useTranslation } from 'react-i18next';
import { languages, type LanguageCode } from '../i18n';

interface LanguageSelectorProps {
  className?: string;
}

export function LanguageSelector({ className = '' }: LanguageSelectorProps) {
  const { i18n, t } = useTranslation();

  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const newLang = e.target.value as LanguageCode;
    i18n.changeLanguage(newLang);
  };

  return (
    <div className={className}>
      <label className="block text-sm text-slate-400 mb-2">
        {t('settings.language.title')}
      </label>
      <select
        value={i18n.language.split('-')[0] as LanguageCode}
        onChange={handleChange}
        className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-3 focus:border-synor-500 focus:ring-1 focus:ring-synor-500 outline-none"
      >
        {Object.entries(languages).map(([code, { name, nativeName }]) => (
          <option key={code} value={code}>
            {nativeName} ({name})
          </option>
        ))}
      </select>
      <p className="text-xs text-slate-500 mt-2">
        {t('settings.language.description')}
      </p>
    </div>
  );
}
