Compteur animé

import { useEffect, useRef, useState } from "react";
import { useInView } from "framer-motion";

interface InViewCounterProps {
  end?: number;
  /** Milisegundos que tarda en llegar a la cifra final. */
  duration?: number;
  label?: string;
}

export default function InViewCounter({
  end = 2400,
  duration = 1200,
  label = "voyageurs heureux",
}: InViewCounterProps) {
  const ref = useRef<HTMLDivElement>(null);
  // useInView mira el viewport y respeta el recorte de los contenedores con scroll: funciona en ambos casos.
  const seen = useInView(ref, { once: false });
  const [n, setN] = useState(0);

  useEffect(() => {
    if (!seen) {
      setN(0);
      return;
    }
    const start = performance.now();
    let raf = 0;
    const run = (t: number) => {
      const p = Math.min(1, (t - start) / duration);
      setN(Math.round(end * p));
      if (p < 1) raf = requestAnimationFrame(run);
    };
    raf = requestAnimationFrame(run);
    return () => cancelAnimationFrame(raf);
  }, [seen, duration, end]);

  return (
    <div ref={ref} className="text-center text-[#1d1d1f] dark:text-[#f5f5f7]">
      <strong className="text-5xl font-semibold tabular-nums">{n.toLocaleString("es-ES")}</strong>
      <p className="text-sm text-[#86868b]">{label}</p>
    </div>
  );
}