"use client";
import React, { useEffect, useRef, useState } from "react";
import CountUp from "react-countup";

interface MyCounterProps {
  number: number;
  duration: number;
}

function MyCounter({ number, duration }: MyCounterProps) {
  const [isVisible, setIsVisible] = useState(false);
  const counterRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          // if target is visible
          setIsVisible(true);
          observer.disconnect();
        }
      },
      {
        threshold: 0.1, // when 10% of the target is visible
      }
    );

    if (counterRef.current) {
      observer.observe(counterRef.current);
    }

    return () => {
      observer.disconnect();
    };
  }, []);

  return (
    <>
      <span ref={counterRef}>
        {isVisible ? (
          <CountUp 
            start={0} 
            end={number} 
            duration={duration}
            easingFn={(t, b, c, d) => {
              return (c * t) / d + b;  // Linear easing function
            }}
          />
        ) : (
          "0"
        )}
      </span>
    </>
  );
}

export default MyCounter;