import { useEffect } from 'react';

/** Attaches a scroll event listener to a DOM element and invokes the callback on each scroll event. */
export const useScroll = (
  element: HTMLElement | null,
  callback: (element: HTMLElement | null, event: Event) => void,
) => {
  useEffect(() => {
    if (!element) return;

    const handleScroll = (event: Event) => callback(element, event);

    element.addEventListener('scroll', handleScroll);

    return () => {
      element.removeEventListener('scroll', handleScroll);
    };
  }, [element]);
};

export default useScroll;