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

const OnScreenOnly = (props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => {
  const wrapperRef = useRef<HTMLDivElement>(null);
  const [onScreen, setOnScreen] = useState(false);
  useEffect(() => {
    const handleScroll = () => {
      if (!wrapperRef.current) return;
      const rect = wrapperRef.current.getBoundingClientRect();
      if (rect.top < window.innerHeight && rect.bottom > 0) {
        setOnScreen(true);
      } else {
        setOnScreen(false);
      }
    };
    handleScroll();
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  const { children, ...otherProps } = props;
  return (
    <div {...otherProps} ref={wrapperRef}>
      {onScreen ? children : null}
    </div>
  );
};

export default OnScreenOnly;