"use client";
import { useEffect, useState } from "react";
import { animate, motion, useMotionValue, useTransform } from "framer-motion";

export function Counter({ countNum }: { countNum: number }) {
  const count = useMotionValue(0);
  const rounded = useTransform(count, (latest:any) => Math.round(latest));
  const [displayValue, setDisplayValue] = useState(0);

  useEffect(() => {
    const controls = animate(count, countNum, {
      duration: 2, 
      ease: "easeOut",
      onUpdate: (latest:any) => {
        setDisplayValue(Math.round(latest));
      },
    });

    return () => controls.stop();
  }, [countNum]); // countNum dependency qo'shildi

  return <motion.span>{displayValue}</motion.span>;
}