import { ReactNode, useEffect } from "react";
import styles from "./styles.module.css";

interface ModalProps {
  children: ReactNode;
  open?: boolean;
  isCloseButtonVisible?: boolean;
  onClose?: () => void;
}

function Modal({
  open,
  children,
  isCloseButtonVisible = true,
  onClose,
}: ModalProps): JSX.Element {
  const handleClose = (event: React.MouseEvent) => {
    if (event.target !== event.currentTarget) return;
    document.body.classList.remove("no-scroll");
    onClose?.();
  };

  useEffect(() => {
    if (open) {
      document.body.classList.add("no-scroll");
    }

    return () => {
      document.body.classList.remove("no-scroll");
    };
  }, [open]);

  if (!open) return <></>;
  return (
    <div className={styles.modal} onClick={handleClose}>
      <div className={styles["modal-content"]}>
        {isCloseButtonVisible && (
          <button className={styles["modal-close-btn"]} onClick={handleClose} />
        )}
        {children}
      </div>
    </div>
  );
}

export default Modal;