"use client";

import { useEffect, useRef } from "react";

const FPS = 24;
const pad = (n: number) => String(n).padStart(2, "0");

// A running SMPTE-style timecode, written straight to the DOM to avoid re-renders.
export default function Timecode({ className = "" }: { className?: string }) {
  const ref = useRef<HTMLSpanElement>(null);

  useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const start = performance.now() - 1001 * (1000 / FPS);
    const id = window.setInterval(() => {
      const f = Math.floor(((performance.now() - start) / 1000) * FPS);
      const s = Math.floor(f / FPS);
      if (ref.current) {
        ref.current.textContent = `01:${pad(Math.floor(s / 60) % 60)}:${pad(s % 60)}:${pad(f % FPS)}`;
      }
    }, 1000 / FPS);
    return () => window.clearInterval(id);
  }, []);

  return (
    <span ref={ref} className={`tabular-nums ${className}`}>
      01:00:41:17
    </span>
  );
}