import React, {ReactNode} from 'react'
import './index.less'

interface Props {
  isShow?: boolean
  styles?: {
    backgroundColor: string
  }
  children: ReactNode
  onClose?(): void
}

const ModalWrapper = (props: Props) => {
  const clickCloseModal = () => {
    if (props.onClose) {
      props.onClose()
    }
  }
  if (!props.isShow) return <div />
  return (
    <div className="pc-modal-wrapper" onClick={clickCloseModal} style={props.styles}>
      <div className="pc-mask" style={props.styles} />
      <div style={{position: 'relative', zIndex: 101}}>{props.children}</div>
    </div>
  )
}

export default ModalWrapper