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

const AnimatedCounter = ({ value }: { value: number }) => {
    const motionValue = useMotionValue(0);
    const spring = useSpring(motionValue, { stiffness: 60, damping: 20 });
    const [display, setDisplay] = useState(0);

    useEffect(() => {
        motionValue.set(value);
    }, [value]);

    useEffect(() => {
        const unsubscribe = spring.on("change", (v) => {
            setDisplay(Math.round(v));
        });
        return unsubscribe;
    }, [spring]);

    return <span>{display}</span>;
};

export default AnimatedCounter;