import LoadingSpinner from "../Spinners/LoadingSpinner";
import WalletItemCard from "./WalletItemCard";

export default function WalletBox({ wallet, payment }) {
  return (
    <>
      <div className="my-wallet-wrapper w-full mb-10">
        <div className="main-wrapper w-full">
          <div className="balance-inquery w-full lg:grid grid-cols-[repeat(auto-fill,_minmax(325px,_1fr))] gap-5 mb-11 h-[22rem]">
            {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-full h-full mb-10 lg:mb-0">
                  <WalletItemCard walletItem={item} payment={payment} />
                </div>
              ))
            ) : null}
          </div>
        </div>
      </div>
    </>
  );
}