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

function useIntersectionObserver(options) {
  const [entry, setEntry] = useState(null);
  const targetRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(([singleEntry]) => {
      setEntry(singleEntry);
    }, options);

    const currentTarget = targetRef.current;
    if (currentTarget) {
      observer.observe(currentTarget);
    }

    return () => {
      if (currentTarget) {
        observer.unobserve(currentTarget);
      }
    };
  }, [options]);

  return [targetRef, entry];
}

// Example Usage:
// function LazyImage({ src, alt }) {
//   const [imgRef, entry] = useIntersectionObserver({
//     root: null,
//     rootMargin: '0px',
//     threshold: 0.1,
//   });

//   const isVisible = entry?.isIntersecting;

//   return (
//     <img
//       ref={imgRef}
//       src={isVisible ? src : ''}
//       alt={alt}
//       style={{ minHeight: '100px', backgroundColor: '#eee' }}
//     />
//   );
// }