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

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 (
    <BaseTextWithSelectField
      textLabel="No. of Periods"
      textValue={noofperiods}
      setTextValue={setnoofperiods}
      textPlaceholder="Enter number of periods"
      selectApiUrl="/api/searchabledropdown/daysduration"
      selectValue={durationUnit}
      setSelectValue={setDurationUnit}
      selectPlaceholder="Select unit..."
      clearError={clearError}
      errors={errors}
      handleFieldBlur={handleFieldBlur}
      validateField={validateField}
      textFieldName={"noofperiods" as T}
      enableHoverEffects={true}
    />
  );
};

export default PeriodsWithUnit;