"use client";

import { useEffect, useRef, useState } from "react";

import { useReducedMotion } from "framer-motion";

import { formatCompact } from "@/lib/utils";

export function CountUp({ value, compact = true }: { value: number; compact?: boolean }) {

  const reduce = useReducedMotion();

  const [display, setDisplay] = useState(reduce ? value : 0);

  const fromRef = useRef(0);

  const raf = useRef<number | null>(null);

  useEffect(() => {

    if (reduce) {

      setDisplay(value);

      return;

    }

    const from = fromRef.current;

    const start = performance.now();

    const dur = 650;

    const tick = (now: number) => {

      const t = Math.min(1, (now - start) / dur);

      const eased = 1 - Math.pow(1 - t, 3);

      setDisplay(Math.round(from + (value - from) * eased));

      if (t < 1) raf.current = requestAnimationFrame(tick);

      else fromRef.current = value;

    };

    raf.current = requestAnimationFrame(tick);

    return () => {

      if (raf.current) cancelAnimationFrame(raf.current);

      fromRef.current = value;

    };

  }, [value, reduce]);

  return <span className="tabular">{compact ? formatCompact(display) : display.toLocaleString()}</span>;

}