import React from "react";

interface PaymentFailedError {
  error: string;
  code: string;
  ownerMessage: string;
  renterMessage: string;
  rentalId: string;
}

interface PaymentFailedModalProps {
  show: boolean;
  onHide: () => void;
  paymentError: PaymentFailedError;
  itemName: string;
}

const PaymentFailedModal: React.FC<PaymentFailedModalProps> = ({
  show,
  onHide,
  paymentError,
  itemName,
}) => {
  if (!show) return null;

  return (
    <div
      className="modal fade show d-block"
      tabIndex={-1}
      style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
    >
      <div className="modal-dialog modal-dialog-centered">
        <div className="modal-content">
          <div className="modal-header border-bottom-0">
            <h5 className="modal-title">
              <span className="me-2">&#9888;</span>
              Payment Failed
            </h5>
            <button
              type="button"
              className="btn-close"
              onClick={onHide}
              aria-label="Close"
            />
          </div>
          <div className="modal-body">
            {/* Error Message */}
            <div className="alert alert-warning mb-3">
              <p className="mb-0">{paymentError.ownerMessage}</p>
            </div>

            {/* Item Info */}
            <p className="text-muted mb-3">
              <strong>Item:</strong> {itemName}
            </p>

            {/* What Happens Next */}
            <div className="bg-light p-3 rounded mb-3">
              <h6 className="mb-2">What happens next?</h6>
              <p className="mb-0 small text-muted">
                An email has been sent to the renter with instructions to update
                their payment method. Once they do, you'll be able to approve
                the rental.
              </p>
            </div>
          </div>
          <div className="modal-footer">
            <button
              type="button"
              className="btn btn-secondary"
              onClick={onHide}
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PaymentFailedModal;
