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

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

const OptionTypeSelect = <T extends string>({
  t_o_option,
  sett_o_option,
  clearError,
  handleFieldBlur,
  validateField,
  errors,
}: OptionTypeSelectProps<T>) => {
  return (
    <div className="group">
      <SearchableSelect
        label="Type of Option"
        apiUrl="/api/searchabledropdown/typeofoption"
        value={t_o_option}
        onChange={(option) => {
          sett_o_option(option);
          clearError("t_o_option" as T);
        }}
        placeholder="Select option type..."
        onBlur={() => handleFieldBlur("t_o_option" as T, validateField)}
        error={errors.t_o_option}
      />
    </div>
  );
};

export default OptionTypeSelect;