import { useCallback, useRef } from "react";

interface UseIntersectionObserverOptions {
  onIntersect: () => void;
  enabled: boolean;
  rootMargin?: string;
  threshold?: number;
}

export function useIntersectionObserver({
  onIntersect,
  enabled,
  rootMargin = "600px",
  threshold = 0,
}: UseIntersectionObserverOptions) {
  const callbackRef = useRef(onIntersect);
  callbackRef.current = onIntersect;
  const observerRef = useRef<IntersectionObserver | null>(null);

  const sentinelRef = useCallback(
    (node: HTMLDivElement | null) => {
      // Disconnect any previous observer
      if (observerRef.current) {
        observerRef.current.disconnect();
        observerRef.current = null;
      }

      if (!node || !enabled) return;

      observerRef.current = new IntersectionObserver(
        (entries) => {
          if (entries[0]?.isIntersecting) {
            callbackRef.current();
          }
        },
        { rootMargin, threshold },
      );

      observerRef.current.observe(node);
    },
    [enabled, rootMargin, threshold],
  );

  return sentinelRef;
}