Use Countdown

1import { useCallback, useEffect, useState } from "react";
2 
3interface UseCountdownType {
4  initialSeconds: number;
5  autoStart?: boolean;
6  onComplete?: () => void;
7}
8 
9type CountdownState = "idle" | "running" | "finished";
10 
11export const useCountdown = ({
12  initialSeconds,
13  autoStart = false,
14  onComplete,
15}: UseCountdownType) => {
16  const [countdown, setCountdown] = useState(Math.max(initialSeconds, 0));
17  const [status, setStatus] = useState<CountdownState>(
18    autoStart ? "running" : "idle",
19  );
20 
21  const start = useCallback(() => {
22    if (countdown <= 0) {
23      setCountdown(Math.max(initialSeconds, 0));
24    }
25 
26    setStatus("running");
27  }, [initialSeconds, countdown]);
28 
29  const reset = useCallback(() => {
30    setCountdown(Math.max(initialSeconds, 0));
31    setStatus("idle");
32  }, [initialSeconds]);
33 
34  useEffect(() => {
35    if (status === "idle" || status === "finished") return;
36 
37    const interval = setInterval(() => {
38      setCountdown((prev) => {
39        const next = prev - 1;
40        if (next <= 0) {
41          clearInterval(interval);
42          setStatus("finished");
43          onComplete?.();
44          return 0;
45        }
46        return next;
47      });
48    }, 1000);
49 
50    return () => clearInterval(interval);
51  }, [status, countdown, onComplete]);
52 
53  return {
54    countdown,
55    status,
56    start,
57    reset,
58    setCountdown,
59  };
60};
61 
62export type UseCountdownReturn = ReturnType<typeof useCountdown>;