import React, { Component } from 'react'
import './index.scss'
import classnames from 'classnames'

class ClosablePopup extends Component {

  state = {
    visible: this.props.visible
  }

  close = () => {
    const {close} = this.props
    close ? close() : this.setState({visible: false})
  }

  render() {
    const {title, className, children, closable = true} = this.props
    return (
      this.state.visible
        ?
        <div className={'closable-popup-mask'}>
          <div className={classnames(['popup-container', className])}>
            <div className="title">{title}</div>
            <div className="content">
              {children}
            </div>
            {
              closable && <i className={'close iconfont iconiconfront-2'} onClick={this.close}/>
            }
          </div>
        </div>
        : null
    )
  }
}


/*
function ClosablePopup({title}) {
  return (
    <div className={'closable-popup-mask'}>
      <div className="popup-container">
        <div className="title">{title}</div>
      </div>
    </div>
  )
}
*/

export default ClosablePopup
