import {ReactNode, useState} from "react";
import "../style/popup.css"

export interface PopupProps {
    children: ReactNode[] | ReactNode,
    displayState: boolean,
    onClose: () => void
}

export default function Popup({children, displayState, onClose}: PopupProps) {
    return (
        <div id="popup-background"
             style={{
                 display: displayState ? 'flex' : 'none',
                 position: "absolute",
                 width: "78%",
                 height: "79%",
                 overflow:"hidden"
             }}
             onClick={onClose}>
            <div id="content" onClick={event => event.stopPropagation()}>
                <button id="close-button" onClick={onClose}>X</button>
                {children}
            </div>
        </div>
    )
}