import { useEffect, useRef } from "react";

export const useInfiniteScroll = (
  triggerElement: HTMLElement | null,
  intersectionCallback: undefined | (() => void),
  intersectionObserverOptions?: IntersectionObserverInit
) => {
  const callbackRef = useRef<typeof intersectionCallback>(intersectionCallback);
  callbackRef.current = intersectionCallback;

  useEffect(() => {
    if (!triggerElement) {
      return;
    }

    const observerCallback: IntersectionObserverCallback = (entries) => {
      const first = entries[0];

      if (first?.isIntersecting) {
        callbackRef.current?.();
      }
    };

    const observer = new IntersectionObserver(observerCallback, intersectionObserverOptions);

    observer.observe(triggerElement);

    return () => {
      observer.unobserve(triggerElement);
    };
  }, [triggerElement, intersectionObserverOptions]);
};