import React, { useEffect, useState } from 'react';

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

const NumberAnimation: React.FC<NumberAnimationProps> = ({ value, duration = 1000 }) => {
    const [currentValue, setCurrentValue] = useState(0);

    useEffect(() => {
        const startValue = 0;
        const endValue = value;
        const increment = (endValue - startValue) / (duration / 10);

        const timer = setInterval(() => {
            setCurrentValue(prev => {
                const newValue = prev + increment;
                if ((increment > 0 && newValue >= endValue) || (increment < 0 && newValue <= endValue)) {
                    clearInterval(timer);
                    return endValue;
                }
                return newValue;
            });
        }, 10);

        return () => clearInterval(timer);
    }, [value, duration]);

    return <span>{Math.round(currentValue)}</span>;
};

export default NumberAnimation;
