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

interface TimePeriodInputProps<T extends string> {
  timeperiod: number | string;
  settimeperiod: (value: string) => void;
  durationUnit: any;
  setDurationUnit: (value: any) => void;
  clearError: (field: T) => void;
  handleFieldBlur: (field: T, validateField: (field: T) => string | undefined) => void;
  validateField: (field: T) => string | undefined;
  errors: { timePeriod?: string };
}

const TimePeriodInput = <T extends string>({
  timeperiod,
  settimeperiod,
  durationUnit,
  setDurationUnit,
  clearError,
  handleFieldBlur,
  validateField,
  errors,
}: TimePeriodInputProps<T>) => {
  return (
    <div className="group sm:col-span-2">
      <div className="flex gap-4 items-end">
        <div className="flex-1">
          <TextBox
            label="Time Period"
            placeholder="Enter time period (e.g. 12)"
            type="number"
            className="text-sm transition-all duration-200 group-hover:shadow-md"
            value={timeperiod}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
              settimeperiod(e.target.value);
              clearError("timePeriod" as T);
            }}
            onBlur={() => handleFieldBlur("timePeriod" as T, validateField)}
            error={errors.timePeriod}
          />
        </div>

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

export default TimePeriodInput;