'use client';

import clsx from 'clsx';
import { useEffect, useState } from 'react';
import { useInView } from 'react-intersection-observer';

interface LazyComponentProps {
  children: React.ReactNode;
  className?: string;
}

export default function LazyComponent({
  children,
  className
}: LazyComponentProps) {
  const [isInView, setIsInView] = useState(false);

  const { ref, inView } = useInView({
    threshold: 0
  });

  useEffect(() => {
    if (inView) {
      setIsInView(true);
    }
  }, [inView]);

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