<script lang='ts' setup>
import type { RwaData } from "@/api/types";
import { cartOutline } from "ionicons/icons";
import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
import { client, safeClient } from "@/api";

const router = useRouter();

const { data } = safeClient(client.api.rwa.subscription.available_editions.get({
  query: {
    limit: 4,
  },
}));

function handleClick(item: RwaData) {
  router.push(`/trade-rwa/${item.id}`);
}
</script>

<template>
  <div>
    <div class="text-md font-semibold">
      RWA产品
    </div>
    <div v-for="item in data?.data" :key="item.id" class="card" @click="handleClick(item)">
      <div class="flex justify-between items-center mb-2 h-10">
        <div class="flex items-center">
          <CryptocurrencyColorNuls class="text-2xl inline-block mr-2" />
          <div class="flex items-center gap-2">
            <div class="text-md font-medium">
              {{ item.product.name }}/{{ item.product.code }}
            </div>
            <ui-tag size="small" type="secondary">
              {{ item.product.category?.name }}
            </ui-tag>
          </div>
        </div>

        <ion-button size="small">
          <ion-icon slot="start" :icon="cartOutline" />
          <span>购 入</span>
        </ion-button>
      </div>

      <div class="text-sm font-semibold mb-2 text-text-300">
        阶段：{{ item.editionName }}
      </div>

      <div class="text-2xl font-bold mb-2">
        {{ formatAmountWithSplit(item.totalSupply) }}
      </div>
    </div>
  </div>
</template>

<style lang='css' scoped>
.card {
  padding: 16px;
  border-radius: 8px;
  margin-top: 12px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: var(--ion-color-faint);
}

@media (prefers-color-scheme: dark) {
  .card {
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.1);
  }
}
ion-button {
  --padding-start: 12px;
  --padding-end: 12px;
  --padding-top: 8px;
  --padding-bottom: 8px;
  --border-radius: 8px;
}
</style>
