"use client";
import { useEffect, useState } from "react";
import Counter from "./Counter";

export default function CounterUp({ count }) {
    const [isMounted, setIsMounted] = useState(false);

    useEffect(() => {
        const observer = new IntersectionObserver(
            ([entry]) => {
                if (entry.isIntersecting) {
                    setIsMounted(true);
                    observer.disconnect();
                }
            },
            { threshold: 0.1 }
        );

        const element = document.querySelector(".odometer");
        if (element) observer.observe(element);

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

    return <span className="odometer">{isMounted && <Counter end={count} duration={20} />}</span>;
}