import { useEffect, useState } from "react";

export function ElapsedTimer({ active }: { active: boolean }) {
  const [s, setS] = useState(0);

  useEffect(() => {
    if (!active) {
      setS(0);
      return;
    }
    const t0 = Date.now();
    const id = window.setInterval(() => {
      setS(Math.floor((Date.now() - t0) / 1000));
    }, 150);
    return () => clearInterval(id);
  }, [active]);

  if (!active) return null;

  return (
    <p className="text-sm text-mist tabular-nums">
      已等待 <span className="text-ink font-medium">{s}</span> 秒
    </p>
  );
}