import { useSelector } from "react-redux";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import WalletItemCard from "./WalletItemCard";
import WalletItemCardFamily from "./WalletItemCardFamily";

/**
 * Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
 */
export default function WalletBox({ wallet, payment, countries }) {
  const { loading, data } = wallet;

  const { userDetails } = useSelector((state) => state.userDetails);
  const accountType = userDetails?.account_type === "FAMILY";

  return (
    <div className="my-wallet-wrapper w-full mb-10">
      <div className="main-wrapper w-full">
        <div className="balance-inquery w-auto grid md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
          {loading ? (
            <div className="w-full h-full flex items-center justify-center">
              <LoadingSpinner size="16" color="sky-blue" />
            </div>
          ) : (
            data.length > 0 && data.map((item) => (
              <div key={item.wallet_uid} className="w-full md:max-w-[450px] h-full mb-10 lg:mb-0">
                <WalletItemCard walletItem={item} payment={payment} countries={countries} />
              </div>
            ))
          )}
        </div>
      </div>
    </div>
  );
}