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

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

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

    useEffect(() => {
        // ✅ subscribe mantém o state sincronizado com o spring
        const unsubscribe = spring.on("change", (v) => {
            setDisplay(Math.round(v));
        });
        return unsubscribe;
    }, [spring]);

    return (
        <ProgressBar
            className={className}
            now={display}
            label={`${display}%`}
        />
    );
};

export default AnimatedProgressBar;