import { useState, useEffect } from 'react';

export const TimerContainer = ({ seconds, refresh, render: RenderComponent }) => {
  const [timeLeft, setTimeLeft] = useState(seconds);

  useEffect(() => {
    const timerId = setInterval(() => {
      setTimeLeft((prevTimeLeft) => {
        const newTimeLeft = prevTimeLeft - refresh / 1000;
        return newTimeLeft < 0 ? 0 : newTimeLeft;
      });
    }, refresh);

    return () => clearInterval(timerId);
  }, [refresh]);

  const hours = Math.floor(timeLeft / 3600);
  const minutes = Math.floor((timeLeft % 3600) / 60);
  const secondsLeft = Math.floor(timeLeft % 60);

  return (
    <>
      <RenderComponent hours={hours} minutes={minutes} seconds={secondsLeft} />
    </>
  );
};
