import { useState, useEffect } from 'react';

export function CountUp({ value }) {
  const [v, setV] = useState(0);
  useEffect(() => {
    const start = v;
    const end = value;
    const dur = 600;
    const t0 = performance.now();
    let raf;
    const step = (t) => {
      const p = Math.min(1, (t - t0) / dur);
      setV(Math.round(start + (end - start) * p));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [value]);
  return <span>{v}</span>;
}