"use client";
import { priceFormatter } from "@/utils/helpers";
import { cn } from "clsx-tailwind-merge";
import { motion, useSpring } from "framer-motion";
import { useEffect, useState } from "react";

type CardPriceProps = {
  price: number;
  duration?: number;
  className?: string;
};

const CardPrice = ({ price, duration = 2000, className }: CardPriceProps) => {
  const [animatedPrice, setAnimatedPrice] = useState(0);
  const springSubCount = useSpring(0, { bounce: 0, duration: duration });

  springSubCount.on("change", (value) => setAnimatedPrice(value));
  useEffect(() => {
    springSubCount.set(price);
  }, [price, springSubCount]);
  return (
    <motion.span
      initial={{ opacity: 0 }}
      animate={{ opacity: 1, transition: { delay: 0.2 } }}
      className={`${cn("text-light-blue font-bold text-[min(12vw,2.5rem)]/none", className)}`}
    >
      {priceFormatter(animatedPrice)}
    </motion.span>
  );
};

export default CardPrice;