import classNames from 'classnames';
import './index.less';

type FullScreenFrameProps = {
  url: string;
  className?: string;
  style?: React.CSSProperties;
  onload?: (e?: React.SyntheticEvent<HTMLIFrameElement, Event>) => void;
  onerror?: (e?: React.SyntheticEvent<HTMLIFrameElement, Event>) => void;
};

function FullScreenFrame({ url, className, style, onload, onerror }: FullScreenFrameProps) {
  return (
    <div className={classNames('kf-full-screen-frame', className ?? '')} style={style}>
      {url && (
        <iframe
          src={url}
          className="kf-full-screen-frame__iframe"
          onLoad={onload}
          onError={onerror}
        ></iframe>
      )}
    </div>
  );
}

export default FullScreenFrame;
