import { onBeforeUnmount, onMounted, ref } from 'vue';

export const useIntersectionActivation = (options = { rootMargin: '180px 0px' }) => {
    const target = ref(null);
    const isActive = ref(false);
    let observer;

    onMounted(() => {
        if (typeof IntersectionObserver === 'undefined') {
            isActive.value = true;
            return;
        }

        observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (!entry.isIntersecting) {
                    return;
                }

                isActive.value = true;
                observer?.disconnect();
            });
        }, options);

        if (target.value) {
            observer.observe(target.value);
        } else {
            isActive.value = true;
        }
    });

    onBeforeUnmount(() => {
        observer?.disconnect();
    });

    return {
        target,
        isActive,
    };
};