import React from "react";
import { BaseSelectField } from "./BaseSelectField";

interface BankSelectProps<T extends string = string> {
  bank: { label: string; value: string } | null;
  setbank: (value: { label: string; value: string } | null) => void;
  setShowBankModal: (value: boolean) => void;
  clearError?: (field: T) => void;
  errors?: Partial<Record<T, string>>;
  handleFieldBlur?: (
    field: T,
    validateField: (field: T) => string | undefined
  ) => void;
  validateField?: (field: T) => string | undefined;
  fieldName?: T;
  /** When changed, bank list is refetched (e.g. after adding a new bank). */
  bankListRefreshTrigger?: unknown;
}

const BankSelect = <T extends string = string>({
  bank,
  setbank,
  setShowBankModal,
  clearError,
  errors,
  handleFieldBlur,
  validateField,
  fieldName,
  bankListRefreshTrigger,
}: BankSelectProps<T>) => {
  const errorField = fieldName || ("bank" as T);
  
  return (
    <BaseSelectField
      label="Bank"
      apiUrl="/api/searchabledropdown/banklist"
      value={bank}
      onChange={setbank}
      placeholder="Select bank..."
      clearError={clearError}
      errors={errors}
      handleFieldBlur={handleFieldBlur}
      validateField={validateField}
      fieldName={errorField}
      showAddButton={true}
      onAddClick={() => setShowBankModal(true)}
      addButtonTitle="Add new bank"
      refreshTrigger={bankListRefreshTrigger}
    />
  );
};

export default BankSelect;