"use client";

import { useEffect, useRef, useState } from "react";
import { useInView, useReducedMotion } from "framer-motion";

type Props = {
  value: number;
  suffix?: string;
  decimals?: number;
  label: string;
};

/** Animated stat counter — JetBrains Mono, counts up on first view. */
export default function Counter({ value, suffix = "", decimals = 0, label }: Props) {
  const ref = useRef<HTMLDivElement>(null);
  const inView = useInView(ref, { once: true, margin: "-15% 0px" });
  const reduce = useReducedMotion();
  const [display, setDisplay] = useState(reduce ? value : 0);

  useEffect(() => {
    if (!inView || reduce) {
      if (reduce) setDisplay(value);
      return;
    }
    let raf = 0;
    const t0 = performance.now();
    const dur = 1600;
    const tick = (t: number) => {
      const p = Math.min(1, (t - t0) / dur);
      const eased = 1 - Math.pow(1 - p, 4);
      setDisplay(value * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [inView, value, reduce]);

  return (
    <div ref={ref}>
      <div className="font-mono text-3xl md:text-4xl text-gold tracking-tight">
        {display.toFixed(decimals)}
        {suffix}
      </div>
      <div className="mt-2 text-[0.8rem] leading-snug text-warmgrey">{label}</div>
    </div>
  );
}