import { useEffect, useState } from "react";

/** A clock that ticks at least every `intervalMs` while the page is visible.
 * docs/SIDEBAR.md asks for a re-render at least every 30s so the duration's
 * cutover points land within one tick. */
export function useNow(intervalMs = 30_000): number {
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => {
    const id = setInterval(() => {
      if (document.visibilityState !== "visible") return;
      setNow(Date.now());
    }, intervalMs);
    return () => clearInterval(id);
  }, [intervalMs]);
  return now;
}