/**
 * @fileoverview React component for ModalBase.jsx
 * 
 * @module components.game.modal.ModalBase
 */


import React from "react";
import { X } from "lucide-react";
import PropTypes from "prop-types";

export const ModalBase = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return (
    <div
      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
      onClick={(e) => e.target === e.currentTarget && onClose && onClose()}
    >
      <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[85vh] flex flex-col overflow-hidden">
        {children}
      </div>
    </div>
  );
};

ModalBase.propTypes = {
  isOpen: PropTypes.bool,
  onClose: PropTypes.func,
  children: PropTypes.node,
};
