// hooks/useIntersection.js
import { useEffect, useState } from "react";

function useIntersectionObserver(options = {}) {
  const [entry, setEntry] = useState(null);
  const [node, setNode] = useState(null);

  useEffect(() => {
    if (!node) return;

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

    observer.observe(node);
    return () => observer.disconnect();
  }, [node, options]);

  return [setNode, entry];
}

// ImageLazy.jsx – lazy‑load an image when it’s near the viewport
import { useIntersectionObserver } from "./hooks/useIntersection";

export default function ImageLazy({ src, alt, placeholder = "/placeholder.png" }) {
  const [setRef, entry] = useIntersectionObserver({
    rootMargin: "200px", // start loading 200px before it’s visible
    threshold: 0,
  });

  const [loaded, setLoaded] = useState(false);

  // When the image starts to intersect, load the real src
  useEffect(() => {
    if (entry && entry.isIntersecting) {
      setLoaded(true);
    }
  }, [entry]);

  return (
    <div>
      <img
        ref={setRef}
        src={loaded ? src : placeholder}
        alt={alt}
        style={{ display: "block", maxWidth: "100%", height: "auto" }}
        loading="lazy"
      />
      {!loaded && (
        <div
          style={{
            width: "100%",
            paddingTop: "56.25%", // 16:9 placeholder
            background: "#eee",
          }}
        />
      )}
    </div>
  );
}

// FadeInOnScroll.jsx – animate elements as they enter the viewport
import { useIntersectionObserver } from "./hooks/useIntersection";

export default function FadeInOnScroll({ children }) {
  const [setRef, entry] = useIntersectionObserver({
    threshold: 0.1, // trigger when 10% visible
  });

  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (entry && entry.isIntersecting) {
      setVisible(true);
    }
  }, [entry]);

  return (
    <div ref={setRef} className={visible ? "fade-in" : ""}>
      {children}
    </div>
  );
}

// CSS for the animation (add to your stylesheet)
/*
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease-out forwards;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
*/