import { FormField } from "@/types";

type DatePartValue = string | undefined;

type DateInputProps = Omit<
  FormField<DatePartValue>,
  "onValid" | "onInvalid"
> & {
  values: number[] | string[];
  onChange: (part: string) => void;
};

function DateInput(props: DateInputProps): JSX.Element {
  const {
    label,
    placeholder,
    name,
    inputClassName,
    value = "",
    values,
    onChange,
  } = props;
  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const datePart = e.target.value ? parseInt(e.target.value, 10) : 0;
    onChange(String(datePart));
  };
  return (
    <div className={`date-picker__field ${inputClassName ?? ""}`}>
      <h3 className="date-picker__field-label">{label}</h3>
      <select
        name={name}
        id={name}
        required
        onChange={handleChange}
        defaultValue={value}
      >
        <option value="" hidden>
          {placeholder}
        </option>
        {values.map((_value, index) => (
          <option key={`${_value}_${index}`} value={_value}>
            {_value}
          </option>
        ))}
      </select>
    </div>
  );
}

export default DateInput;
