import React from 'react';
import type { CurrencyCode } from '../types';
import { currencies } from '../utils/currencies';

interface Props {
  value: CurrencyCode;
  onChange: (currency: CurrencyCode) => void;
}

export function CurrencySelect({ value, onChange }: Props) {
  return (
    <select
      value={value}
      onChange={(e) => onChange(e.target.value as CurrencyCode)}
      className="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
    >
      {Object.entries(currencies).map(([code, currency]) => (
        <option key={code} value={code}>
          {currency.symbol} {code}
        </option>
      ))}
    </select>
  );
}