import { useEffect, useState } from 'react'

/**
 * Triggers a re-render every `ms` milliseconds while `active` is true.
 * Used by live views to refresh time-based fields (e.g. elapsed timer).
 */
export function useTicker(active: boolean, ms = 1000): number {
  const [tick, setTick] = useState(0)
  useEffect(() => {
    if (!active) return
    const id = window.setInterval(() => setTick((t) => t + 1), ms)
    return () => window.clearInterval(id)
  }, [active, ms])
  return tick
}