import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Currency, useCurrency } from '@/contexts/CurrencyContext';
import { DollarSign } from 'lucide-react';

const currencies: { value: Currency; label: string; flag: string }[] = [
  { value: 'USD', label: 'USD - Dólar', flag: '🇺🇸' },
  { value: 'EUR', label: 'EUR - Euro', flag: '🇪🇺' },
  { value: 'GBP', label: 'GBP - Libra', flag: '🇬🇧' },
  { value: 'MXN', label: 'MXN - Peso Mexicano', flag: '🇲🇽' },
  { value: 'COP', label: 'COP - Peso Colombiano', flag: '🇨🇴' },
  { value: 'ARS', label: 'ARS - Peso Argentino', flag: '🇦🇷' }
];

const CurrencySelector = () => {
  const { currency, setCurrency } = useCurrency();

  return (
    <div className="flex items-center gap-2">
      <DollarSign className="h-4 w-4 text-muted-foreground" />
      <Select value={currency} onValueChange={(value) => setCurrency(value as Currency)}>
        <SelectTrigger className="w-[180px]">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {currencies.map((curr) => (
            <SelectItem key={curr.value} value={curr.value}>
              <span className="flex items-center gap-2">
                <span>{curr.flag}</span>
                <span>{curr.label}</span>
              </span>
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
};

export default CurrencySelector;