import {useCallback, useRef, useState} from 'react';

export function useStickySentinel() {
  const [isSticky, setIsSticky] = useState(false);

  const observerRef = useRef<IntersectionObserver>();

  const sentinelRef = useCallback((sentinel: HTMLDivElement | null) => {
    if (sentinel) {
      const observer = new IntersectionObserver(
        ([e]) => setIsSticky(e.intersectionRatio < 1),
        {threshold: [1]}
      );
      observerRef.current = observer;
      observer.observe(sentinel);
    } else if (observerRef.current) {
      observerRef.current?.disconnect();
    }
  }, []);

  return {isSticky, sentinelRef};
}