import { useState, useCallback } from 'react';
import useIntersectionObserver from "../../../hooks/useIntersectionObserver/index.js";
const useLazyMount = function useLazyMount(opts) {
  const {
    lazy = false,
    minHeight,
    children,
    ...intersectionOptions
  } = opts;
  const [isSeen, setIsSeen] = useState(false);
  const see = useCallback(e => {
    if (!e.isIntersecting) return;
    setIsSeen(true);
  }, []);
  const ref = useIntersectionObserver({
    rootMargin: '500px',
    ...intersectionOptions,
    active: lazy,
    callback: see
  });
  const content = isSeen || !lazy ? children : null;
  const styles = !isSeen && lazy ? {
    minHeight
  } : {};
  return {
    ref,
    styles,
    content
  };
};
export default useLazyMount;