import React, { memo } from 'react';
import './Intro.css';
import InstructionFrame from '../../template/overlay/InstructionFrame';
import InstructionVideo from '../IntructionVideo';

var Intro = function Intro(props) {
  // const [close, setClose] = useState(false);
  // const [closed, setClosed] = useState('');
  // return (
  //   <div className={`intro ${closed}`}>
  //     <div className="intro-container">
  //       <div className={`intro-video ${closed}`}>
  //         <InstructionFrame>
  //           <InstructionVideo {...props} />
  //         </InstructionFrame>
  //       </div>
  //     </div>
  //   </div>
  // );
  return /*#__PURE__*/React.createElement("div", {
    className: "overlay-content"
  }, /*#__PURE__*/React.createElement(InstructionFrame, null, /*#__PURE__*/React.createElement(InstructionVideo, {
    onNextTransition: props.onNextTransition
  })));
};

export default memo(Intro);