Number Odometer

"use client";

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

interface OdometerProps {
  value: number;
  duration?: number;
}

export default function NumberOdometer({ value, duration = 2 }: OdometerProps) {
  const [displayValue, setDisplayValue] = useState(0);

  useEffect(() => {
    let start = 0;
    const end = value;
    const range = end - start;
    const startTime = performance.now();

    function animate(currentTime: number) {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / (duration * 1000), 1);
      setDisplayValue(Math.floor(start + range * progress));
      if (progress < 1) requestAnimationFrame(animate);
    }

    requestAnimationFrame(animate);
  }, [value, duration]);

  return (
    <color: #79c0ff;">style="color: #ff7b72;">div color: #79c0ff;">className="text-7xl font-bold tabular-nums tracking-tighter">
      {displayValue.toLocaleString()}
    </color: #79c0ff;">style="color: #ff7b72;">div>
  );
}