// components/LazyLoad.tsx
"use client";

import { ReactNode, useEffect, useRef, useState } from "react";

type LazyLoadProps = {
  children: ReactNode;
  className?: string;
};

export default function LazyLoad({ children, className = "" }: LazyLoadProps) {
  const ref = useRef<HTMLDivElement>(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setIsVisible(true);
        observer.disconnect();
      }
    }, { threshold: 0.1 });

    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  return (
    <div ref={ref} className={className}>
      {isVisible ? children : null}
    </div>
  );
}