import React from 'react'
import styles from './index.module.scss'
import { useHistory } from 'react-router-dom'
function A4base({ show, setShow }: { show: boolean; setShow: (show: boolean) => void }) {
  const history = useHistory()
  return (
    <div className={styles.A4base} style={{ display: show ? 'block' : 'none' }}>
      <div className={'A4base-title3'}>
        <img src={require('./image/title_3.png')} alt='' />
      </div>
      <div className='A4base-logo'>
        <img src={require('./image/logo.png')} alt='' />
      </div>
      <div className='A4base-content'>
        <div className='A4base-title1'>
          <img src={require('./image/title.png')} alt='' />
        </div>
        <div className='A4base-title2'>
          <img src={require('./image/title_2.png')} alt='' />
        </div>
        <div className='A4base-other'>
          <img src={require('./image/other.png')} alt='' />
        </div>
      </div>
      <div className='A4base-pic1'>
        <img src={require('./image/pic_1.png')} alt='' />
      </div>
      <div className='A4base-pic2'>
        <img src={require('./image/pic_2.png')} alt='' />
      </div>
      <div
        className='A4base-button'
        onClick={() => {
          setShow(false)
          history.push('/home?m=mm-1562')
          window.location.reload()
        }}
      >
        <img src={require('./image/button.png')} alt='' />
      </div>
    </div>
  )
}

const MemoA4base = React.memo(A4base)

export default MemoA4base