import CurrencyStaticsSection from "./CurrencyStaticsSection";
import CurrentBalanceWidget from "./CurrentBalanceWidget";
import InvestmentSection from "./InvestmentSection";
import RecentTransactionWidget from "./RecentTransactionWidget";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import WalletItemCard from "./WalletItemCard";

export default function WalletBox({ wallet, coupon, payment }) {
  return (
    <>
      <div className="my-wallet-wrapper w-full mb-10">
        <div className="main-wrapper w-full">
          <div className="balance-inquery w-full lg:h-[436px] lg:flex lg:space-x-11 mb-11">
            {wallet.loading ? (
              <div className="w-full h-full flex items-center justify-center">
                <LoadingSpinner size="16" color="sky-blue" />
              </div>
            ) : wallet.data.length ? (
              wallet.data.map((item, index) => (
                <div className="lg:w-1/2 h-full mb-10 lg:mb-0">
                  <WalletItemCard walletItem={item} paymentHistory={payment} />
                </div>
              ))
            ) : null}

            {/*<div className="flex-1">*/}
            {/*    <CurrentBalanceWidget />*/}
            {/*</div>*/}
            {/*  <div className="flex-1">*/}
            {/*      <div className="my-wallets w-full h-full bg-white dark:bg-dark-white   rounded-lg p-6">*/}
            {/*          <div className="mb-4">*/}
            {/*              <h1 className="text-xl font-bold tracking-wide   text-dark-gray dark:text-white">*/}
            {/*                  My Wallet*/}
            {/*              </h1>*/}
            {/*          </div>*/}
            {/*          <div className="content-area">*/}
            {/*              <div className="flex justify-between items-center mb-6">*/}
            {/*                  <div className="flex space-x-5 items-center">*/}
            {/*                      <div className="account-name flex space-x-4 items-center">*/}
            {/*                          <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
            {/*                              <img src={bank1} alt="" />*/}
            {/*                          </div>*/}
            {/*                          <div className="name">*/}
            {/*                              <p className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
            {/*                                  MetaMask*/}
            {/*                              </p>*/}
            {/*                          </div>*/}
            {/*                      </div>*/}
            {/*                  </div>*/}
            {/*                  <div className="flex space-x-5 items-center">*/}
            {/*                      <div>*/}
            {/*                          <p className="text-xl font-bold text-dark-gray dark:text-white text-right mb-3">*/}
            {/*                              $734.79*/}
            {/*                          </p>*/}
            {/*                          <p className="text-sm text-thin-light-gray">*/}
            {/*                              New Add*/}
            {/*                              <span className="text-light-green ml-1">*/}
            {/*    +324.75*/}
            {/*  </span>*/}
            {/*                          </p>*/}
            {/*                      </div>*/}
            {/*                      <div>*/}
            {/*<span className="dark:text-thin-light-gray text-[#374557]">*/}
            {/*  <svg*/}
            {/*      width="6"*/}
            {/*      height="26"*/}
            {/*      viewBox="0 0 6 26"*/}
            {/*      fill="none"*/}
            {/*      className="fill-current"*/}
            {/*      xmlns="http://www.w3.org/2000/svg"*/}
            {/*  >*/}
            {/*    <circle cx="3" cy="3" r="3" fillOpacity="0.6" />*/}
            {/*    <circle*/}
            {/*        cx="3"*/}
            {/*        cy="12.75"*/}
            {/*        r="3"*/}
            {/*        fillOpacity="0.6"*/}
            {/*    />*/}
            {/*    <circle*/}
            {/*        cx="3"*/}
            {/*        cy="22.5"*/}
            {/*        r="3"*/}
            {/*        fillOpacity="0.6"*/}
            {/*    />*/}
            {/*  </svg>*/}
            {/*</span>*/}
            {/*                      </div>*/}
            {/*                  </div>*/}
            {/*              </div>*/}
            {/*              <div className="flex justify-between items-center mb-6">*/}
            {/*                  <div className="flex space-x-5 items-center">*/}
            {/*                      <div className="account-name flex space-x-4 items-center">*/}
            {/*                          <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
            {/*                              <img src={bank2} alt="" />*/}
            {/*                          </div>*/}
            {/*                          <div className="name">*/}
            {/*                              <p className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
            {/*                                  Coinbase Wallet*/}
            {/*                              </p>*/}
            {/*                          </div>*/}
            {/*                      </div>*/}
            {/*                  </div>*/}
            {/*                  <div className="flex space-x-5 items-center">*/}
            {/*                      <div>*/}
            {/*                          <p className="text-xl font-bold text-dark-gray dark:text-white text-right mb-3">*/}
            {/*                              $734.79*/}
            {/*                          </p>*/}
            {/*                          <p className="text-sm text-thin-light-gray">*/}
            {/*                              New Add*/}
            {/*                              <span className="text-light-green ml-1">*/}
            {/*    +324.75*/}
            {/*  </span>*/}
            {/*                          </p>*/}
            {/*                      </div>*/}
            {/*                      <div>*/}
            {/*<span className="dark:text-thin-light-gray text-[#374557]">*/}
            {/*  <svg*/}
            {/*      width="6"*/}
            {/*      height="26"*/}
            {/*      viewBox="0 0 6 26"*/}
            {/*      fill="none"*/}
            {/*      className="fill-current"*/}
            {/*      xmlns="http://www.w3.org/2000/svg"*/}
            {/*  >*/}
            {/*    <circle cx="3" cy="3" r="3" fillOpacity="0.6" />*/}
            {/*    <circle*/}
            {/*        cx="3"*/}
            {/*        cy="12.75"*/}
            {/*        r="3"*/}
            {/*        fillOpacity="0.6"*/}
            {/*    />*/}
            {/*    <circle*/}
            {/*        cx="3"*/}
            {/*        cy="22.5"*/}
            {/*        r="3"*/}
            {/*        fillOpacity="0.6"*/}
            {/*    />*/}
            {/*  </svg>*/}
            {/*</span>*/}
            {/*                      </div>*/}
            {/*                  </div>*/}
            {/*              </div>*/}
            {/*              <div className="flex justify-between items-center mb-6">*/}
            {/*                  <div className="flex space-x-5 items-center">*/}
            {/*                      <div className="account-name flex space-x-4 items-center">*/}
            {/*                          <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
            {/*                              <img src={bank3} alt="" />*/}
            {/*                          </div>*/}
            {/*                          <div className="name">*/}
            {/*                              <p className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
            {/*                                  Bitski*/}
            {/*                              </p>*/}
            {/*                          </div>*/}
            {/*                      </div>*/}
            {/*                  </div>*/}
            {/*                  <div className="flex space-x-5 items-center">*/}
            {/*                      <div>*/}
            {/*                          <p className="text-xl font-bold text-dark-gray dark:text-white text-right mb-3">*/}
            {/*                              $734.79*/}
            {/*                          </p>*/}
            {/*                          <p className="text-sm text-thin-light-gray">*/}
            {/*                              New Add*/}
            {/*                              <span className="text-light-green ml-1">*/}
            {/*    +324.75*/}
            {/*  </span>*/}
            {/*                          </p>*/}
            {/*                      </div>*/}
            {/*                      <div>*/}
            {/*<span className="dark:text-thin-light-gray text-[#374557]">*/}
            {/*  <svg*/}
            {/*      width="6"*/}
            {/*      height="26"*/}
            {/*      viewBox="0 0 6 26"*/}
            {/*      fill="none"*/}
            {/*      className="fill-current"*/}
            {/*      xmlns="http://www.w3.org/2000/svg"*/}
            {/*  >*/}
            {/*    <circle cx="3" cy="3" r="3" fillOpacity="0.6" />*/}
            {/*    <circle*/}
            {/*        cx="3"*/}
            {/*        cy="12.75"*/}
            {/*        r="3"*/}
            {/*        fillOpacity="0.6"*/}
            {/*    />*/}
            {/*    <circle*/}
            {/*        cx="3"*/}
            {/*        cy="22.5"*/}
            {/*        r="3"*/}
            {/*        fillOpacity="0.6"*/}
            {/*    />*/}
            {/*  </svg>*/}
            {/*</span>*/}
            {/*                      </div>*/}
            {/*                  </div>*/}
            {/*              </div>*/}
            {/*              <div className="flex justify-between items-center mb-6">*/}
            {/*                  <div className="flex space-x-5 items-center">*/}
            {/*                      <div className="account-name flex space-x-4 items-center">*/}
            {/*                          <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
            {/*                              <img src={bank4} alt="" />*/}
            {/*                          </div>*/}
            {/*                          <div className="name">*/}
            {/*                              <p className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
            {/*                                  WalletConnect*/}
            {/*                              </p>*/}
            {/*                          </div>*/}
            {/*                      </div>*/}
            {/*                  </div>*/}
            {/*                  <div className="flex space-x-5 items-center">*/}
            {/*                      <div>*/}
            {/*                          <p className="text-xl font-bold text-dark-gray dark:text-white text-right mb-3">*/}
            {/*                              $734.79*/}
            {/*                          </p>*/}
            {/*                          <p className="text-sm text-thin-light-gray">*/}
            {/*                              New Add*/}
            {/*                              <span className="text-light-green ml-1">*/}
            {/*    +324.75*/}
            {/*  </span>*/}
            {/*                          </p>*/}
            {/*                      </div>*/}
            {/*                      <div>*/}
            {/*<span className="dark:text-thin-light-gray text-[#374557]">*/}
            {/*  <svg*/}
            {/*      width="6"*/}
            {/*      height="26"*/}
            {/*      viewBox="0 0 6 26"*/}
            {/*      fill="none"*/}
            {/*      className="fill-current"*/}
            {/*      xmlns="http://www.w3.org/2000/svg"*/}
            {/*  >*/}
            {/*    <circle cx="3" cy="3" r="3" fillOpacity="0.6" />*/}
            {/*    <circle*/}
            {/*        cx="3"*/}
            {/*        cy="12.75"*/}
            {/*        r="3"*/}
            {/*        fillOpacity="0.6"*/}
            {/*    />*/}
            {/*    <circle*/}
            {/*        cx="3"*/}
            {/*        cy="22.5"*/}
            {/*        r="3"*/}
            {/*        fillOpacity="0.6"*/}
            {/*    />*/}
            {/*  </svg>*/}
            {/*</span>*/}
            {/*                      </div>*/}
            {/*                  </div>*/}
            {/*              </div>*/}
            {/*          </div>*/}
            {/*      </div>*/}
            {/*  </div>*/}
          </div>
          {/* flex space-x-11 */}
          {/*<div className="recent-and-investment grid lg:grid-cols-2 grid-cols-1 2xl:gap-[40px] xl:gap-7 gap-4 lg:h-[416px] w-full  justify-between">*/}
          {/*    <div className=" h-full">*/}
          {/*        <RecentTransactionWidget />*/}
          {/*    </div>*/}
          {/*    <div className=" h-full">*/}
          {/*        <InvestmentSection />*/}
          {/*    </div>*/}
          {/*</div>*/}
        </div>
      </div>
    </>
  );
}