"use client";

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

export function AnimatedMoney({
  amountMinor,
  currency = "GBP",
  className,
}: {
  amountMinor: number;
  currency?: string;
  className?: string;
}) {
  const mv = useMotionValue(amountMinor);
  const text = useTransform(mv, (v) =>
    new Intl.NumberFormat("en-GB", {
      style: "currency",
      currency,
      maximumFractionDigits: 2,
    }).format(v / 100),
  );
  useEffect(() => {
    const controls = animate(mv, amountMinor, { duration: 0.8, ease: "easeOut" });
    return () => controls.stop();
  }, [amountMinor, mv]);
  return <motion.span className={className}>{text}</motion.span>;
}
