import React from "react";
import SearchableSelect2 from "@/components/ui/SearchableSelect";
import { Plus } from "lucide-react";

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;
}

const BankSelect = <T extends string = string>({
  bank,
  setbank,
  setShowBankModal,
  clearError,
  errors,
  handleFieldBlur,
  validateField,
  fieldName,
}: BankSelectProps<T>) => {
  const errorField = fieldName || ("bank" as T);
  
  return (
    <div className="group flex items-end gap-2 transition-all duration-200">
      <div className="flex-1">
        <SearchableSelect2
          label="Bank"
          apiUrl="/api/searchabledropdown/banklist"
          value={bank}
          onChange={(option) => {
            setbank(option);
            clearError?.(errorField);
          }}
          placeholder="Select bank..."
          onBlur={handleFieldBlur && validateField ? () => handleFieldBlur(errorField, validateField) : undefined}
          error={errors?.[errorField]}
          className="group-hover:border-[#428B4D]/50"
        />
      </div>
      <button
        type="button"
        onClick={() => setShowBankModal(true)}
        className="mb-[2px] h-8 w-8 flex items-center justify-center rounded-md border border-gray-300 hover:border-[#428B4D] hover:bg-[#428B4D]/10 transition"
        title="Add new bank"
      >
        <Plus className="h-5 w-5 text-[#428B4D]" />
      </button>
    </div>
  );
};

export default BankSelect;