import React from "react";
import SearchableSelect from "@/components/ui/SearchableSelect";

interface CurrencyBoughtSelectProps<T extends string> {
  currencybought: any;
  setcurrencybought: (value: any) => void;
  clearError: (field: T) => void;
  handleFieldBlur: (field: T, validateField: (field: T) => string | undefined) => void;
  validateField: (field: T) => string | undefined;
  errors: Partial<Record<T, string>>;
}

const CurrencyBoughtSelect = <T extends string>({
  currencybought,
  setcurrencybought,
  clearError,
  handleFieldBlur,
  validateField,
  errors,
}: CurrencyBoughtSelectProps<T>) => {
  return (
    <div className="group">
      <SearchableSelect
        label="Currency Bought"
        apiUrl="/api/searchabledropdown/currencylist"
        value={currencybought}
        onChange={(option) => {
          setcurrencybought(option);
          clearError("currencyBought" as T);
        }}
        placeholder="Select currency..."
        onBlur={() => handleFieldBlur("currencyBought" as T, validateField)}
        error={errors["currencyBought" as T]}
      />
    </div>
  );
};

export default CurrencyBoughtSelect;