import PropTypes from 'prop-types'
import useScrollVisibility from '../hooks/useScrollVisibility'

const LazyWhenVisible = ({
  scrollRootRef,
  minHeight,
  enabled = true,
  children
}) => {
  const { targetRef, isVisible } = useScrollVisibility(scrollRootRef, {
    enabled
  })

  if (!enabled || isVisible) {
    return children
  }

  return (
    <div
      ref={targetRef}
      style={minHeight != null ? { minHeight } : undefined}
      aria-hidden
    />
  )
}

LazyWhenVisible.propTypes = {
  scrollRootRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
  minHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  enabled: PropTypes.bool,
  children: PropTypes.node
}

export default LazyWhenVisible