/**
 * Renders a modal with information about a credit transaction.
 * @returns {JSX.Element} - The rendered modal component.
 */
function CompleteConfirmCredit({ onClose, confirmCredit }) {
  const { data } = confirmCredit;
  const isSuccess =
    data?.result === "Charge success" || data?.status === "successful";

  return (
    <div className="logout-modal-body w-full flex flex-col items-center">
      <div className="content-wrapper w-full h-[32rem]">
        <div className="w-full mb-10">
          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
            <div className="px-4 md:p-8 py-4 add-fund-info">
              <div className="field w-full mb-3 min-h-[45px]">
                <div
                  className={`flex flex-col gap-4 ${
                    !isSuccess && "h-[328px] items-center justify-center"
                  }`}
                >
                  <div className="flex items-center w-full justify-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="100"
                      height="100"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke={isSuccess ? "green" : "red"}
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className={`feather ${
                        isSuccess ? "feather-check-circle" : "feather-x-circle"
                      }`}
                    >
                      {isSuccess ? (
                        <>
                          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                          <polyline points="22 4 12 14.01 9 11.01"></polyline>
                        </>
                      ) : (
                        <>
                          <circle cx="12" cy="12" r="10"></circle>
                          <line x1="15" y1="9" x2="9" y2="15"></line>
                          <line x1="9" y1="9" x2="15" y2="15"></line>
                        </>
                      )}
                    </svg>
                  </div>

                  <div className="flex items-center">
                    <h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
                      {isSuccess
                        ? "Credit was Successful!"
                        : "Credit was Unsuccessful"}
                    </h1>
                  </div>

                  {data?.internal_return >= 0 &&
                    data?.result !== "Charge failed" && (
                      <>
                        <div className="flex items-center gap-8">
                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                            Amount({data?.currency || ""})
                          </h1>
                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                            {`${data?.symbol || ""} ${
                              Number(data?.amount * 0.01).toLocaleString() || ""
                            }`}
                          </span>
                        </div>
                        
                        {data?.curr_balance &&
                        <div className="flex items-center gap-8">
                          <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                            Wallet Balance
                          </h1>
                          <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                            {data?.curr_balance * 0.01}
                          </span>
                        </div>
                        }

                        {isSuccess && (
                          <div className="flex items-center gap-8">
                            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                              Confirmation Number
                            </h1>
                            <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                              {data?.confirmation}
                            </span>
                          </div>
                        )}
                      </>
                    )}
                </div>
              </div>
            </div>
            <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
              <button
                className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full w-[100px]"
                onClick={onClose}
              >
                Ok
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default CompleteConfirmCredit;