import { useCallback } from "react";

const Modal = ({
  isOpen,
  onClose,
  title,
  body,
  disabled,
  size="md",
  position="top",
}) => {
  const handleClose = useCallback(() => {
    if (disabled) return;
    onClose();
  }, [disabled, onClose]);



  if (!isOpen) return null;

  return (
    <div
      className="modal fade show"
      style={{ display: "block", backgroundColor: "rgba(0,0,0,0.6)" }}
      tabIndex="-1"
      role="dialog"
    >
      <div className={`modal-dialog modal-${size} modal-dialog-${position}`} role="document">
        <div className="modal-content  text-white shadow-lg">
          {/* Header */}
          <div className="modal-header pb-2 border-0">
            <h5 className="modal-title">{title}</h5>
            <button
              type="button"
              className="btn-close btn-close-white"
              onClick={handleClose}
              aria-label="Close"
            >
            
            </button>
          </div>

          {/* Body */}
          <div className="modal-body pt-0">{body}</div>


        
        </div>
      </div>
    </div>
  );
};

export default Modal;