'use client';

import { useEffect, useRef, useState } from 'react';
import { animate } from 'framer-motion';
import { usePrefersReducedMotion } from '@/lib/motion';

// Counts up to `hasta` once scrolled into view. Only ever used with a number
// that's already written in the approved copy (e.g. "30+ años") — a visual
// echo of real content, never a stand-in for real metrics we don't have yet.
export function ContadorNumero({ hasta, sufijo = '', className = '' }: { hasta: number; sufijo?: string; className?: string }) {
  const reduced = usePrefersReducedMotion();
  const ref = useRef<HTMLSpanElement>(null);
  const [display, setDisplay] = useState(reduced ? hasta : 0);

  useEffect(() => {
    const el = ref.current;
    if (!el || reduced) return;
    let controls: { stop: () => void } | undefined;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (!entry.isIntersecting) return;
        observer.unobserve(el);
        controls = animate(0, hasta, {
          duration: 1.4,
          ease: [0.22, 1, 0.36, 1],
          onUpdate: (v) => setDisplay(Math.round(v)),
        });
      },
      { threshold: 0.5 },
    );
    observer.observe(el);
    return () => {
      observer.disconnect();
      controls?.stop();
    };
  }, [reduced, hasta]);

  return (
    <span ref={ref} className={className}>
      {display}
      {sufijo}
    </span>
  );
}