import { useState } from 'react';

export const TimerControl = ({ render: RenderComponent }) => {
  const [hours, setHours] = useState(0);
  const [minutes, setMinutes] = useState(0);
  const [seconds, setSeconds] = useState(0);
  const [timerStarted, setTimerStarted] = useState(false);

  const startTimer = () => {
    setTimerStarted(true);
  };

  return (
    <div>
      {!timerStarted && (
        <div>
          <label htmlFor="hours">Hours:</label>
          <input
            type="number"
            id="hours"
            min={0}
            value={hours}
            onChange={(e) => setHours(e.target.value)}
          />
          <label htmlFor="minutes">Minutes:</label>
          <input
            type="number"
            id="minutes"
            min={0}
            max={59}
            value={minutes}
            onChange={(e) => setMinutes(e.target.value)}
          />
          <label htmlFor="seconds">Seconds:</label>
          <input
            type="number"
            id="seconds"
            min={0}
            max={59}
            value={seconds}
            onChange={(e) => setSeconds(e.target.value)}
          />
          <button onClick={startTimer}>Start</button>
        </div>
      )}
      {timerStarted && <RenderComponent seconds={+hours * 3600 + +minutes * 60 + +seconds} />}
    </div>
  );
};
