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 justify-content-center 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;
