'use client';

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { SUPPORTED_CURRENCIES } from '@/lib/utils/currency';

interface CurrencySelectProps {
  value: string | undefined;
  onValueChange: (value: string) => void;
  disabled?: boolean;
  id?: string;
  className?: string;
}

/**
 * Select dropdown over the curated `SUPPORTED_CURRENCIES` list. Replaces
 * the free-text `<Input maxLength={3}>` price-currency spots so reps
 * can't typo "EURO" or "$$$" into a 3-letter ISO column.
 */
export function CurrencySelect({
  value,
  onValueChange,
  disabled,
  id,
  className,
}: CurrencySelectProps) {
  return (
    <Select value={value} onValueChange={onValueChange} disabled={disabled}>
      <SelectTrigger id={id} className={className}>
        <SelectValue placeholder="Select currency" />
      </SelectTrigger>
      <SelectContent>
        {SUPPORTED_CURRENCIES.map((c) => (
          <SelectItem key={c.code} value={c.code}>
            <span className="tabular-nums mr-2">{c.symbol}</span>
            <span className="font-medium">{c.code}</span>
            <span className="text-muted-foreground ml-2 text-xs">{c.label}</span>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}