import React from "react";

interface AuthenticationRequiredModalProps {
  rental: {
    renter?: { firstName?: string; lastName?: string; email?: string };
    item?: { name?: string };
  };
  onClose: () => void;
}

const AuthenticationRequiredModal: React.FC<
  AuthenticationRequiredModalProps
> = ({ rental, onClose }) => {
  const renterName =
    `${rental.renter?.firstName || ""} ${rental.renter?.lastName || ""}`.trim() ||
    "The renter";
  const renterEmail = rental.renter?.email || "their email";
  const itemName = rental.item?.name || "the item";

  return (
    <div
      className="modal fade show d-block"
      style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
      tabIndex={-1}
      onClick={(e) => {
        if (e.target === e.currentTarget) onClose();
      }}
    >
      <div className="modal-dialog modal-dialog-centered">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title">
              <i className="bi bi-shield-lock text-warning me-2"></i>
              Authentication Required
            </h5>
            <button
              type="button"
              className="btn-close"
              onClick={onClose}
            ></button>
          </div>
          <div className="modal-body">
            <p>
              <strong>{renterName}</strong>'s bank requires additional
              authentication to complete the payment for{" "}
              <strong>{itemName}</strong>.
            </p>
            <div className="alert alert-info mb-3">
              <i className="bi bi-envelope me-2"></i>
              We've sent an email to <strong>{renterEmail}</strong> with
              instructions to complete the authentication.
            </div>
            <p className="text-muted mb-0">
              Once they complete the authentication, the rental will be
              automatically confirmed and you'll receive a notification.
            </p>
          </div>
          <div className="modal-footer">
            <button
              type="button"
              className="btn btn-primary"
              onClick={onClose}
            >
              Got it
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AuthenticationRequiredModal;
