"use client"; import React, { createContext, useContext, useState, useEffect, useRef, } from "react"; interface TimerContextType { timeRemaining: number; resetTimer: (duration: number) => void; stopTimer: () => void; setInitialTime: (duration: number) => void; } const TimerContext = createContext(undefined); export const TimerProvider: React.FC<{ children: React.ReactNode }> = ({ children, }) => { const [timeRemaining, setTimeRemaining] = useState(0); const timerRef = useRef(null); // countdown effect useEffect(() => { if (timeRemaining > 0 && !timerRef.current) { timerRef.current = setInterval(() => { setTimeRemaining((prev) => { if (prev <= 1) { clearInterval(timerRef.current!); timerRef.current = null; return 0; } return prev - 1; }); }, 1000); } return () => { if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; } }; }, [timeRemaining]); const resetTimer = (duration: number) => { if (timerRef.current) clearInterval(timerRef.current); timerRef.current = null; setTimeRemaining(duration); }; const stopTimer = () => { if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; } }; const setInitialTime = (duration: number) => { if (timerRef.current) clearInterval(timerRef.current); timerRef.current = null; setTimeRemaining(duration); }; return ( {children} ); }; export const useTimer = (): TimerContextType => { const context = useContext(TimerContext); if (!context) { throw new Error("useTimer must be used within a TimerProvider"); } return context; };