import { useCallback, useState } from 'react';
import { useTime } from '@meecrobe/react-time-hook';

function TimeInput() {
  const [value, setValue] = useState('');
  const time = useTime(value);

  const handleChange = React.useCallback((e) => {
    setValue(e.target.value);
  }, []);

  const handleBlur = React.useCallback(() => {
    setValue(time);
  }, [time]);

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
      onBlur={handleBlur}
    />
  );
}