"use client";
import { useEffect, useState, useRef } from 'react';

function useOnScreen(threshold = 0.5) {
    const ref = useRef<HTMLDivElement | null>(null);
    const [isVisible, setIsVisible] = useState(false);

    useEffect(() => {
        const observer = new IntersectionObserver(
            ([entry]) => setIsVisible(entry.isIntersecting),
            { threshold }
        );

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

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

    return [ref, isVisible] as const;
};

const CountUp = ({ end, duration = 2 }: { end: number, duration?: number }) => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        const start = 0;
        const incrementTime = 1000 / 60; // ~60fps
        const totalIncrements = duration * 1000 / incrementTime;
        const increment = end / totalIncrements;

        let current = start;
        const timer = setInterval(() => {
            current += increment;
            if (current >= end) {
                clearInterval(timer);
                setCount(end);
            } else {
                setCount(Math.floor(current));
            }
        }, incrementTime);

        return () => clearInterval(timer);
    }, [end, duration]);

    return <>{count}</>;
};

export const CountUpOnView = ({ end }: { end: number }) => {
    const [ref, isVisible] = useOnScreen(0.5);
    const [start, setStart] = useState(false);

    useEffect(() => {
        if (isVisible) setStart(true);
    }, [isVisible]);

    return (
        <div ref={ref}>
            {start ? <CountUp end={end} duration={2} /> : 0}
        </div>
    );
};