import React from "react";
import { BaseTextWithSelectField } from "./BaseTextWithSelectField";

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 (
    <BaseTextWithSelectField
      textLabel="Time Period"
      textValue={timeperiod}
      setTextValue={settimeperiod}
      textPlaceholder="Enter time period (e.g. 12)"
      textType="number"
      selectApiUrl="/api/searchabledropdown/daysduration"
      selectValue={durationUnit}
      setSelectValue={setDurationUnit}
      selectPlaceholder="Select unit..."
      clearError={clearError}
      errors={errors}
      handleFieldBlur={handleFieldBlur}
      validateField={validateField}
      textFieldName={"timePeriod" as T}
      enableHoverEffects={true}
    />
  );
};

export default TimePeriodInput;