import React, { useEffect, useState } from "react";
import clock from "../../assets/img/clock.svg";
import { useGame } from "../../hooks/useGame";
import {formatCurrentTime} from "../../utils/gameFunctions";

export default function Timer({ currentTime, setCurrentTime }) {
	const { hasCheckedTutorial, isTimeRuning } = useGame();
	console.log("currentTime", currentTime);
	useEffect(() => {
		if (!hasCheckedTutorial || !isTimeRuning) return;
		let intervalId;
		intervalId = setInterval(() => setCurrentTime(currentTime + 100), 1000);
		setCurrentTime(currentTime);

		return () => clearInterval(intervalId);
	}, [hasCheckedTutorial, currentTime, isTimeRuning]);

	const gameTime = formatCurrentTime(currentTime);

	return (
		<div className='timer'>
			<div className='bg'></div>
			<img className='clock' src={clock} alt='' />
			<h2>{gameTime}</h2>
		</div>
	);
}
