/**
 * 단계 소요 시간 측정 — active가 true가 되는 시점부터 ms를 기록한다.
 * key(단계 인덱스) 또는 active가 바뀌면 0부터 다시 측정.
 * (카운트다운/가로회전 대기 중에는 active=false로 두어 30ms 재렌더링을 피한다.)
 */
import { useEffect, useRef, useState } from 'react';

export function usePlayTime(stepKey: number | string, active = true): number {
  const [elapsed, setElapsed] = useState(0);
  const startRef = useRef(Date.now());

  useEffect(() => {
    if (!active) return;
    startRef.current = Date.now();
    setElapsed(0);
    const id = window.setInterval(() => {
      setElapsed(Date.now() - startRef.current);
    }, 30);
    return () => window.clearInterval(id);
  }, [stepKey, active]);

  return elapsed;
}