import styles from "../styles/exos/Modal.module.scss";
import { parseClassName } from "../utils/utils.js";

export default function Modal({ children, active, onClose, overlay }) {
  return (
    <>
      <div className={parseClassName([styles.modal, active ? styles.visible:"", styles['md-effect']])}>
        {/* <div className={styles['md-content']}> */}
          {active && children}
          {/* </div> */}
      </div>
      {overlay == undefined && <div
        className={"overlay " + (active == false ? " invisible" : "")}
        onClick={() => {
          onClose && onClose()
        }}
      ></div>}
      {overlay != undefined && <div
        className={"overlay " + (overlay == false ? " invisible" : "")}
        onClick={() => {
          onClose && onClose()
        }}
      ></div>}
    </>
  );
}