import React from "react";

interface ModalProps {
  onClose: () => void;
  paymentSuccess: boolean;
}

const PaymentConfirmModal: React.FC<ModalProps> = ({
  onClose,
  paymentSuccess,
}) => {
  return (
    <div id="menu-confirmation">
      <div className="content text-center mb-0 pt-4">
        {paymentSuccess ? (
          <>
            <i className="fa fa-check-circle color-green2 fa-7x pb-3" />
            <h2>Your payment was successful</h2>
            <p className="boxed-text-xl font-15">
              The transfer has been successfully processed. Email receipt has
              been sent.
            </p>
            <a
              // href="/address-print"
              href="#"
              onClick={onClose}
              data-menu="menu-success-2"
              className="btn-margins btn btn-m font-13 font-600 bg-blue-dark border-0 btn-full rounded-s mt-4"
            >
              OK
            </a>
          </>
        ) : (
          <>
            <style>
              {`
                .modal-content { 
                  margin: 0 15px;
                  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, .1); 
                }
              `}
            </style>
            <i className="fa fa-times-circle color-red-dark fa-7x pb-3" />
            <h2>Payment Failed</h2>
            <p className="boxed-text-xl font-15">
              Unfortunately, your payment could not be processed. Please try
              again.
            </p>
            <button
              onClick={onClose}
              data-menu="menu-success-2"
              className="btn-margins btn btn-m font-13 font-600 bg-red-dark border-0 btn-full rounded-s mt-4 mx-auto"
            >
              Try Again
            </button>
          </>
        )}
      </div>
    </div>
  );
};

export default PaymentConfirmModal;