import { motion, useMotionValue, useTransform, animate } from "motion/react";
import { useEffect } from "react";
import clsx, { type ClassValue } from "clsx";

type Props = {
  className?: ClassValue;
  value: number;
};

export default function Counter({ className, value }: Props) {
  const motionValue = useMotionValue(0);
  const display = useTransform(motionValue, (v) => Math.round(v).toLocaleString("fr-FR"));

  useEffect(
    () =>
      animate(motionValue, value, {
        duration: 0.3,
        ease: "easeOut",
      }).stop,
    [motionValue, value],
  );

  return <motion.span className={clsx("tabular-nums", className)}>{display}</motion.span>;
}
