Axil_website/src/components/ui/StatCounter.tsx

'use client';

import { useEffect, useRef } from 'react';
import { gsap, ScrollTrigger } from '@/lib/gsap';

interface Props {
  value: number;
  decimals?: number;
}

export function StatCounter({ value, decimals = 0 }: Props) {
  const ref = useRef<HTMLSpanElement>(null);

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

    const obj = { val: 0 };

    const trigger = ScrollTrigger.create({
      trigger: el,
      start: 'top 80%',
      once: true,
      onEnter: () => {
        gsap.to(obj, {
          val: value,
          duration: 2.2,
          ease: 'power2.out',
          onUpdate() {
            el.textContent = obj.val.toFixed(decimals);
          },
        });
      },
    });

    return () => trigger.kill();
  }, [value, decimals]);

  return <span ref={ref}>0</span>;
}