import { useRef } from "react";
import { motion, useScroll, useTransform, useReducedMotion } from "framer-motion";
import AnimatedCounter from "./AnimatedCounter";

// Giant outlined numeral that fills with a solid count-up as it scrolls into
// view — the "scroll-fill" award pattern.
export default function ScrollFillNumber({ to, suffix = "", className = "", testId, tone = "light" }: { to: number; suffix?: string; className?: string; testId?: string; tone?: "light" | "ink" }) {
  const ref = useRef<HTMLSpanElement>(null);
  const reduce = useReducedMotion();
  const { scrollYProgress } = useScroll({ target: ref, offset: ["start 0.95", "start 0.5"] });
  const clip = useTransform(scrollYProgress, [0, 1], ["inset(100% 0 0 0)", "inset(0% 0 0 0)"]);

  return (
    <span ref={ref} className={`relative inline-block tabular-nums ${className}`} data-testid={testId}>
      <span className={tone === "ink" ? "num-outline-ink" : "num-outline"} aria-hidden="true">
        {to}{suffix}
      </span>
      <motion.span className={`absolute inset-0 ${tone === "ink" ? "text-[#14151A]" : "text-white"}`} style={reduce ? undefined : { clipPath: clip }}>
        <AnimatedCounter to={to} suffix={suffix} testId={testId ? `${testId}-counter` : undefined} />
      </motion.span>
    </span>
  );
}