import React from 'react';
import PropTypes from 'prop-types';
import styles from './iframe.module.scss';

const Iframe = ({
  src = '',
  title = 'iframe',
  minHeight = '45rem',
  lazyLoad = true,
  frameBorder = 0,
}) => (
  <>
    <div className={styles?.iframeContainer || ''}>
      <iframe
        title={title}
        style={{ width: '100%', minHeight, display: 'block' }}
        width={868}
        height={454}
        src={src}
        loading={lazyLoad ? 'lazy' : 'eager'}
        frameBorder={frameBorder}
      />
      <noscript>
        {`<iframe title="${title}"
              style="width: 100%, ${minHeight}, display: block"
              width={868}
              height={454}
              src="${src}"
              loading="${lazyLoad ? 'lazy' : 'eager'}" />`}
      </noscript>
    </div>
  </>
);

Iframe.propTypes = {
  src: PropTypes.string.isRequired,
  title: PropTypes.string,
  minHeight: PropTypes.string,
  lazyLoad: PropTypes.bool,
  frameBorder: PropTypes.number,
};

export default Iframe;
