import React from 'react';
import { Globe } from 'lucide-react';
import { useI18n } from '../store/i18nStore';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

/**
 * Seletor compacto de idioma (pt-BR / en-US) com ícone de globo.
 *
 * Use em cabeçalhos, sidebars, ou barra superior.
 */
const LanguageSwitcher: React.FC = () => {
  const { locale, setLocale, t } = useI18n();
  return (
    <Select value={locale} onValueChange={(v) => setLocale(v as 'pt-BR' | 'en-US')}>
      <SelectTrigger
        className="w-auto h-8 px-2 text-xs gap-1"
        aria-label={t('language')}
        title={t('language')}
      >
        <Globe className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="pt-BR">🇧🇷 {t('language_pt')}</SelectItem>
        <SelectItem value="en-US">🇺🇸 {t('language_en')}</SelectItem>
      </SelectContent>
    </Select>
  );
};

export default LanguageSwitcher;