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

interface TransactionTypeSelectProps<T extends string> {
  t_o_t: any;
  sett_o_t: (value: any) => void;
  clearError: (field: T) => void;
  errors: { t_o_t?: string };
  handleFieldBlur: (field: T, validateField: (field: T) => string | undefined) => void;
  validateField: (field: T) => string | undefined;
}

const TransactionTypeSelect = <T extends string>({
  t_o_t,
  sett_o_t,
  clearError,
  errors,
  handleFieldBlur,
  validateField,
}: TransactionTypeSelectProps<T>) => {
  return (
    <div className="group transition-all duration-200 hover:shadow-md hover:shadow-[#428B4D]/10">
      <SearchableSelect2
        label="Type of Transaction"
        apiUrl="/api/searchabledropdown/typeoftransaction"
        value={t_o_t}
        onChange={(option) => {
          sett_o_t(option);
          clearError("t_o_t" as T);
        }}
        placeholder="Select transaction type..."
        onBlur={() => handleFieldBlur("t_o_t" as T, validateField)}
        error={errors.t_o_t}
        className="group-hover:border-[#428B4D]/50"
      />
    </div>
  );
};

export default TransactionTypeSelect;