import React from 'react';
import styles from './styles.module.css';

/**
 * @typedef {Object} ModalProps
 * @property {boolean} isOpen - Indicates if the modal is open.
 * @property {() => void} onClose - Function to call when the modal is closed.
 */

/**
 * @param {ModalProps} props
 */
export const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) {
    return null;
  }

  return (
    <div className={styles.modal} onClick={onClose}>
      <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
        <button className={styles.closeButton} onClick={onClose}>
          &times;
        </button>
        {children}
      </div>
    </div>
  );
};