import React, { Component } from 'react';

import './css/Popup.css';


class Popup extends Component {
    state = {
        visible: false
    };
    
    show = () => {
        this.setState({
            visible: true
        });
    };

    hide = () => {
        this.setState({
            visible: false
        });
    };
    
    render() {
        return (
            <>
                <div className={`${this.state.visible ? "" : "hidden"}` + " popupClose"} onClick={this.hide} />
                
                <div className={`${this.state.visible ? "visible" : ""}` + " popup " + this.props.className}>
                    {this.props.children}
                </div>
            </>
        );
    }
}

export default Popup;