import React from "react";
import UpdatePaymentMethod from "./UpdatePaymentMethod";

interface UpdatePaymentMethodModalProps {
  show: boolean;
  onHide: () => void;
  rentalId: string;
  itemName: string;
  onSuccess: () => void;
}

const UpdatePaymentMethodModal: React.FC<UpdatePaymentMethodModalProps> = ({
  show,
  onHide,
  rentalId,
  itemName,
  onSuccess,
}) => {
  const [error, setError] = React.useState<string | null>(null);

  if (!show) return null;

  const handleSuccess = () => {
    setError(null);
    onSuccess();
    onHide();
  };

  const handleError = (errorMessage: string) => {
    setError(errorMessage);
  };

  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 modal-lg">
        <div className="modal-content">
          <div className="modal-header border-bottom-0">
            <h5 className="modal-title">Update Payment Method</h5>
            <button
              type="button"
              className="btn-close"
              onClick={onHide}
              aria-label="Close"
            />
          </div>
          <div className="modal-body">
            {error && (
              <div className="alert alert-danger mb-3">
                <small>{error}</small>
              </div>
            )}
            <UpdatePaymentMethod
              rentalId={rentalId}
              itemName={itemName}
              onSuccess={handleSuccess}
              onError={handleError}
              onCancel={onHide}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default UpdatePaymentMethodModal;
