1  import React from 'react'
 2  import PropTypes from 'prop-types'
 3  import styles from './Modal.module.scss'
 4  
 5  const Modal = props => {
 6    const {
 7      visible,
 8      children,
 9      modalClassName,
10      windowClassName,
11      contentClassName,
12      onClickClose,
13    } = props
14  
15    return (
16      <div
17        className={`${modalClassName} ${styles.wrapper} ${
18          visible ? styles.active : ''
19        }`}
20      >
21        <div className={`${styles.window} ${windowClassName}`}>
22          <div className={styles.close} onClick={onClickClose}>
23            +
24          </div>
25          <div className={contentClassName}>{visible && children}</div>
26        </div>
27      </div>
28    )
29  }
30  
31  Modal.defaultProps = {
32    modalClassName: '',
33    windowClassName: '',
34    contentClassName: '',
35    children: null,
36  }
37  
38  Modal.propTypes = {
39    visible: PropTypes.bool.isRequired,
40    modalClassName: PropTypes.string,
41    windowClassName: PropTypes.string,
42    contentClassName: PropTypes.string,
43    children: PropTypes.oneOfType([
44      PropTypes.arrayOf(PropTypes.node),
45      PropTypes.node,
46    ]),
47    onClickClose: PropTypes.func.isRequired,
48  }
49  
50  export default Modal