import React from "react";

import "./modalLayout.scss";

export const ModalLayout = ({
  active,
  setActive,
  onClose,
  children,
  styles,
  type,
  ...props
}) => {
  const handleClose = (event) => {
    if (event.target.className === "modal-layout active") {
      setActive(false);
      if (onClose) {
        onClose(); // Вызов колбэк-функции при закрытии модального окна
      }
    }
  };

  return (
    <div
      className={active ? `modal-layout active` : "modal-layout"}
      onClick={handleClose}
      {...props}
    >
      <div
        className={
          styles
            ? `modal-layout__content ${styles}`
            : `modal-layout__content ${type}`
        }
      >
        {children}
      </div>
    </div>
  );
};

export default ModalLayout;