import React from "react";
import "./Modal.css";
import { Button } from "../ui/button";
import ReactDom from 'react-dom';

// make sure to update index.html with <div id="portal"></div> under <div id="root"></div>

const Modal = ({ open, onClose, children }: any) => {
  if (!open) return null;

  return ReactDom.createPortal (
    <>
    <div className="fixed top-0 left-0 right-0 bottom-0 bg-slate-900 bg-opacity-70"></div>
      <div className="fixed top-1/2 left-1/2  bg-[#D7D7D7] p-[50px] z-[1000] translate-x-[-50%] translate-y-[-50%]">
        <Button onClick={onClose}>Close</Button>
        {children}
      </div>
    </>,
    document.getElementById('portal')!
  );
};

export default Modal;
