import { useEffect, useRef, useState } from 'react'

const IframeContent = ({ url }) => {
  const [iframeLoaded, setIframeLoaded] = useState(false)
  const [iframe, setIframe] = useState(null)
  const iframeRef = useRef(null)

  useEffect(() => {
    if (iframeLoaded) {
      setIframe({
        height: document.querySelector('main').offsetHeight
      })
    }
  }, [iframeLoaded])

  return (
    <div className='mx-auto container h-full'>
      <iframe
        ref={iframeRef}
        src={url}
        width='100%'
        seamless
        style={{ height: iframe?.height || 0 }}
        onLoad={() => setIframeLoaded(true)}
      />
    </div>
  )
}

export default IframeContent