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

interface PeriodsWithUnitProps<T extends string> {
  noofperiods: any;
  setnoofperiods: (value: any) => void;
  durationUnit: any;
  setDurationUnit: (value: any) => void;
  errors: { noofperiods?: string };
  clearError: (field: T) => void;
  handleFieldBlur: (field: T, validateField: (field: T) => string | undefined) => void;
  validateField: (field: T) => string | undefined;
}

const PeriodsWithUnit = <T extends string>({
  noofperiods,
  setnoofperiods,
  durationUnit,
  setDurationUnit,
  errors,
  clearError,
  handleFieldBlur,
  validateField,
}: PeriodsWithUnitProps<T>) => {
  return (
    <div className="group sm:col-span-2">
      <div className="flex gap-4 items-end">
        <div className="flex-1">
          <TextBox
            label="No. of Periods"
            placeholder="Enter number of periods"
            className="text-sm transition-all duration-200 group-hover:shadow-md"
            value={noofperiods}
            onChange={(e) => {
              setnoofperiods(e.target.value);
              clearError("noofperiods" as T);
            }}
            onBlur={() => handleFieldBlur("noofperiods" as T, validateField)}
            error={errors.noofperiods}
          />
        </div>

        <div className="flex-1">
          <SearchableSelect2
            label=" "
            apiUrl="/api/searchabledropdown/daysduration"
            value={durationUnit}
            onChange={setDurationUnit}
            placeholder="Select unit..."
          />
        </div>
      </div>
    </div>
  );
};

export default PeriodsWithUnit;