frontend/src/components/shared/AnimatedCounter.jsx

import { useEffect, useState } from 'react';

export default function AnimatedCounter({ value, className = '' }) {
  const [display, setDisplay] = useState(0);

  useEffect(() => {
    const target = Number(value) || 0;
    const duration = 900;
    const steps = 36;
    const increment = target / steps;
    let current = 0;
    const timer = window.setInterval(() => {
      current += increment;
      if (current >= target) {
        setDisplay(target);
        window.clearInterval(timer);
      } else {
        setDisplay(Math.floor(current));
      }
    }, duration / steps);
    return () => window.clearInterval(timer);
  }, [value]);

  return <span className={className}>{Math.round(display).toLocaleString()}</span>;
}