import { useState, useEffect } from 'react';

export const Timer = ({ seconds }) => {
  const [time, setTime] = useState(seconds);
  const [paused, setPaused] = useState(false);

  useEffect(() => {
    const intervalId = setInterval(() => {
      if (!paused) {
        setTime((prevTime) => {
          if (prevTime === 0) {
            clearInterval(intervalId);
            return 0;
          } else {
            return prevTime - 1;
          }
        });
      }
    }, 1000);
    return () => clearInterval(intervalId);
  }, [paused]);

  const formatTime = (time) => {
    const hours = Math.floor(time / 3600);
    const minutes = Math.floor((time - hours * 3600) / 60);
    const seconds = time - hours * 3600 - minutes * 60;
    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds
      .toString()
      .padStart(2, '0')}`;
  };

  return (
    <div>
      <div>{formatTime(time)}</div>
      <button onClick={() => setPaused(!paused)}>{paused ? 'Resume' : 'Pause'}</button>
    </div>
  );
};
