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

interface Props {
  value: CurrencyCode;
  onChange: (currency: CurrencyCode) => void;
  id?: string;
  label?: string;
}

export function CurrencySelect({ value, onChange, id = 'currency-select', label = 'Select Currency' }: Props) {
  // Get the symbol for the currently selected currency
  // Use $ for CHF instead of showing 'CHF' text
  const symbol = currencies[value]?.symbol || '$';
  const currentSymbol = symbol === 'CHF' ? '$' : symbol;

  return (
    <FormSelect
      id={id}
      label={label}
      icon={<span className="text-lg font-semibold">{currentSymbol}</span>}
      value={value}
      onChange={(e) => onChange(e.target.value as CurrencyCode)}
    >
      {Object.entries(currencies).map(([code]) => (
        <option key={code} value={code}>
          {code}
        </option>
      ))}
    </FormSelect>
  );
}