"use client";

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

interface AnimatedCounterProps {
  value: number;
  label: string;
  icon?: ReactNode;
  duration?: number;
}

export default function AnimatedCounter({
  value,
  label,
  icon,
  duration = 1500,
}: AnimatedCounterProps) {
  const [count, setCount] = useState(0);
  const [hasAnimated, setHasAnimated] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0]?.isIntersecting && !hasAnimated) {
          setHasAnimated(true);
          // Animate from 0 to value
          const startTime = performance.now();
          const animate = (currentTime: number) => {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / duration, 1);
            // Ease-out quad
            const eased = 1 - (1 - progress) * (1 - progress);
            setCount(Math.round(eased * value));
            if (progress < 1) {
              requestAnimationFrame(animate);
            }
          };
          requestAnimationFrame(animate);
        }
      },
      { threshold: 0.3 }
    );

    observer.observe(el);
    return () => observer.disconnect();
  }, [value, duration, hasAnimated]);

  return (
    <div ref={ref} className="flex flex-col items-center gap-1 px-4 py-3">
      {icon && <div className="text-primary mb-1">{icon}</div>}
      <span className="text-2xl md:text-3xl font-bold text-white tabular-nums">
        {count.toLocaleString()}
      </span>
      <span className="text-xs md:text-sm text-text-muted font-medium uppercase tracking-wider">
        {label}
      </span>
    </div>
  );
}