import React from "react";
import "./Modal.scss";

interface ModalProps {
  open: boolean;
  onClose: () => void;
  children: React.ReactNode;
  className?: string;
  overlayClassName?: string;
  title?: string;
}

const Modal: React.FC<ModalProps> = ({
  open,
  onClose,
  children,
  title,
  className = "",
}) => {
  if (!open) return null;

  return (
    <div
      className={"modal__overlay"}
      onClick={onClose}
      data-testid="modal-overlay"
    >
      <div
        className={`modal${className ? " " + className : ""}`}
        onClick={(e) => e.stopPropagation()}
        data-testid="modal-content"
      >
        <button
          className="modal__close"
          onClick={onClose}
          aria-label="Close"
          type="button"
        >
          &times;
        </button>
        {title && <h2 className="modal__title">{title}</h2>}
        <div className={"modal__body"}>{children}</div>
      </div>
    </div>
  );
};

export default Modal;