<script lang='ts' setup>
import { getCryptoIcon } from "@/config/crypto";

const walletStore = useWalletStore();
const { balances } = storeToRefs(walletStore);
</script>

<template>
  <div>
    <ion-label class="text-xs font-medium text-text-300">
      Asset
    </ion-label>
    <ion-list lines="none" class="space-y-5 mt-2!">
      <ion-item v-for="asset, i in balances" :key="i" class="">
        <div class="flex items-center space-x-3 flex-1">
          <component :is="getCryptoIcon(asset.assetCode)" class="w-8 h-8" />
          <div class="space-y-1">
            <div class="font-medium text-md">
              {{ asset.assetCode }}
            </div>
            <div class="text-xs text-text-700 font-bold">
              Total: ${{ asset.total }}
            </div>
          </div>
        </div>
        <div class="w-fit font-bold">
          ${{ Number(asset.available) }}
        </div>
      </ion-item>
    </ion-list>
  </div>
</template>

<style lang='css' scoped>
ion-item::part(native) {
  --padding-start: 0;
}
</style>
