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"],
        ])}
        onKeyDown={(e) => {
          console.log('e')
          if (e.code == 'Escape') {
            onClose()
          }
        }}
      >
        {/* <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>
      )}
    </>
  );
}