import React from "react";

function CompleteConfirmCredit({ onClose, confirmCredit }) {
  const { data } = confirmCredit
  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 ${
                    data?.result !== "Charge success" &&
                    "h-[328px] items-center justify-center"
                  }`}
                >
                  {/* Success Icon for now */}
                  <div className="flex items-center w-full justify-center">
                    {data?.result == "Charge success" ? (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="100"
                        height="100"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="green"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        className="feather feather-check-circle"
                      >
                        <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>
                      </svg>
                    ) : (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="none"
                        width="100"
                        height="100"
                        stroke="red"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        className="feather feather-x-circle"
                      >
                        <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">
                      {data?.result == "Charge success"
                        ? "Credit was Successful!"
                        : "Credit was Unsuccessful"}
                    </h1>
                  </div>

                  {data?.internal_return >= 0 ? (
                    <>
                      <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>

                      <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}
                        </span>
                      </div>

                      <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>
                    </>
                  ) : null}
                </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;