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

import Icon from './Icon';

export default class Modal extends React.Component {
    render() {
        // Render nothing if the "show" prop is false
        if (!this.props.show) {
            return null;
        }

        // 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 (
            <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>
        );
    }
}

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