import { useEffect, useState } from "react";

const ElementObserver = (selectors, options = { threshold: 0.2 }) => {
  const [visibleElements, setVisibleElements] = useState(new Set());

  useEffect(() => {
    const elements = selectors.flatMap((selector) =>
      Array.from(document.querySelectorAll(selector))
    );
    if (elements.length === 0) return;

    const handleIntersection = (entries) => {
      entries.forEach((entry) => {
        setVisibleElements((prevVisibleElements) => {
          const newVisibleElements = new Set(prevVisibleElements);
          if (entry.isIntersecting) {
            newVisibleElements.add(entry.target);
          } else {
            newVisibleElements.delete(entry.target);
          }
          return newVisibleElements;
        });
      });
    };

    const observer = new IntersectionObserver(handleIntersection, options);
    elements.forEach((element) => observer.observe(element));

    return () => elements.forEach((element) => observer.unobserve(element));
  }, [selectors, options]);

  return (element) => visibleElements.has(element);
};

export default ElementObserver;