"use client";

import { useEffect, useState } from "react";

export function useMockupProgress(
  active: boolean,
  phaseOneMs = 3000,
  phaseTwoMs = 2000,
) {
  const [phase, setPhase] = useState<0 | 1 | 2>(0);
  const [processed, setProcessed] = useState(false);

  useEffect(() => {
    if (!active) return;

    const startFrame = requestAnimationFrame(() => setPhase(1));
    const midTimer = setTimeout(() => setPhase(2), phaseOneMs);
    const doneTimer = setTimeout(() => setProcessed(true), phaseOneMs + phaseTwoMs);

    return () => {
      cancelAnimationFrame(startFrame);
      clearTimeout(midTimer);
      clearTimeout(doneTimer);
    };
  }, [active, phaseOneMs, phaseTwoMs]);

  const transitionMs = phase === 1 ? phaseOneMs : phase === 2 ? phaseTwoMs : 0;

  return { phase, processed, transitionMs };
}