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

const MemoA5Mobile = React.memo(A5Mobile)

export default MemoA5Mobile
