import React, { type ChangeEventHandler } from 'react';

interface Props {
  onChange: (value: string | string[] | number | number[] | null) => void;
  keyData: string;
}

export default function NumberInput({ keyData, onChange }: Props): JSX.Element {
  const onSelectChange: ChangeEventHandler<HTMLInputElement> = ({
    target,
  }): void => {
    const value = parseInt(target.value);
    onChange(isNaN(value) ? null : value);
  };

  return (
    <input
      name={`number-input-${keyData}`}
      id="foo"
      type="number"
      placeholder="1"
      onChange={onSelectChange}
    />
  );
}