"use client"
import { useState } from "react";
import CountUp from "react-countup";
import { useInView } from "react-intersection-observer";
const CounterDetail = ({ stats }) => {
  const [startCounting, setStartCounting] = useState(false);
  const { ref, inView } = useInView({
    triggerOnce: true, // Trigger counting only once
    threshold: 0.5, // Adjust the threshold as needed (0 to 1)
  });

  // Start counting when it enters the viewport
  if (inView && !startCounting) {
    setStartCounting(true);
  }
  return (

    <div className="w-full bg-couner-data-landing py-32  text-center">
      <div className="grid  xs:grid-cols-1 lg:grid-cols-3">
        {
          stats.map(s => (
            <div className="xs:my-10 lg:my-20" key={s.documentId}>
              <p className="mb-0 text-[12px] text-gray-300">{s.subtitle} </p>
              <h3 className="mb-0 text-4xl text-gray-300 font-bold">
                {s.title}
              </h3>
              <p className="mb-0 text-6xl font-bold text-gray-500 mt-5">
                <CountUp
                  start={startCounting ? 0 : undefined}
                  end={s.stat}
                  duration={2.75}
                /></p>
            </div>
          ))
        }
      </div>
    </div>

  );
};

export default CounterDetail;
