'use client';

import { useEffect, useRef } from 'react';

/**
 * Calls `onIntersect` when the returned sentinel ref becomes visible near
 * the bottom of the viewport — the standard "load more as you scroll"
 * pattern, via IntersectionObserver rather than a scroll listener (cheaper,
 * no manual throttling needed).
 */
export function useInfiniteScroll(onIntersect: () => void, enabled: boolean) {
  const sentinelRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!enabled) return;
    const el = sentinelRef.current;
    if (!el) return;

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0]?.isIntersecting) onIntersect();
      },
      { rootMargin: '400px' }, // start loading a bit before the sentinel is actually on screen
    );

    observer.observe(el);
    return () => observer.disconnect();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [enabled, onIntersect]);

  return sentinelRef;
}