import React from 'react';
import PropTypes from 'prop-types';

import Icon from './Icon';

function Modal(props) {
    // The gray background
    const backdropStyle = {
        position: 'fixed',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.3)',
        padding: 50
    };
    return props.show ? (
        <div id="dialogt" style={backdropStyle}>
            <div id="dialogw">
                <div id="dialog_header">
                    <div id="dialogc" onClick={this.props.onClose}>
                        <Icon name="ei-close" size="s" />
                    </div>
                </div>
                {this.props.children}
            </div>
        </div>
    ) : (null);
}

export default React.memo(Modal);

Modal.propTypes = {
    onClose: PropTypes.func.isRequired,
    show: PropTypes.bool,
    children: PropTypes.node
};