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

type FullScreenFrameProps = {
  /** URL */
  url: string;
  /** 自定义类名 */
  className?: string;
  /** 自定义样式 */
  style?: React.CSSProperties;
  /** 加载完成回调 */
  onLoad?: (e?: React.SyntheticEvent<HTMLIFrameElement, Event>) => void;
  /** 加载失败回调 */
  onError?: (e?: React.SyntheticEvent<HTMLIFrameElement, Event>) => void;
};

/**
 * 全屏 iframe，IFramePage 组件的子组件，开发中应该使用 IFramePage
 */
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;
