import React from 'react';
import { createPortal } from 'react-dom';
import { FaTimes } from 'react-icons/fa'; // Assuming you have react-icons installed

// Added size prop to control modal width
const Modal = ({ isOpen, onClose, title, children, size = 'lg' }) => {
  if (!isOpen) return null;

  // Determine max-width class based on size prop
  let maxWidthClass = 'max-w-lg'; // Default size
  if (size === 'md') {
      maxWidthClass = 'max-w-md';
  } else if (size === 'xl') {
      maxWidthClass = 'max-w-xl';
  } else if (size === '2xl') {
      maxWidthClass = 'max-w-2xl';
  } else if (size === 'full') {
      maxWidthClass = 'max-w-full'; // Use with caution, might need padding adjustments
  }


  // Use createPortal to render the modal outside the main app div
  return createPortal(
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70 p-4">
      {/* Use maxWidthClass here */}
      <div className={`bg-campfire-charcoal rounded-lg shadow-xl w-full ${maxWidthClass} max-h-[90vh] overflow-y-auto relative`}>
        {/* Modal Header */}
        <div className="flex justify-between items-center p-4 border-b border-campfire-ash/20">
          <h3 className="text-xl font-semibold text-campfire-light">{title}</h3>
          <button
            onClick={onClose}
            className="text-campfire-ash hover:text-campfire-light transition-colors"
            aria-label="Close modal"
          >
            <FaTimes size={20} />
          </button>
        </div>

        {/* Modal Body */}
        <div className="p-4">
          {children}
        </div>
      </div>
    </div>,
    document.body // Render into the body
  );
};

export default Modal;