import classNames from "classnames";
import { createRef, useEffect, useState } from "react";

const Popup = ({content, Button, onClose}) => {
    const [isopen, setisopen] = useState(false);
    const ref = createRef()

    useEffect(() => {
        if (isopen) {
            document.body.style.overflow = 'hidden'
        } else {
            document.body.style.overflow = 'auto'
        }
    }, [isopen])

    return <>
            <div onClick={setisopen.bind(this, true)}>
                {Button()}
            </div>
            <div ref={ref} 
                 className={classNames({
                    "fixed left-[160px] w-[calc(100vw-160px)] h-[calc(100vh-92px)] top-[92px] z-[1000000] bg-transparent flex items-center justify-center !m-0 overflow-hidden": true,
                    "hidden": !isopen
                 })} 
                 onClick={(event) => setisopen(false)
            }>
                {content()}
            </div>
           </>;
}

export default Popup;