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

defineProps<{
  data: RwaData[];
}>();

const { t } = useI18n();
const router = useRouter();

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

<template>
  <div class="space-y-3 antialiased mt-5">
    <ion-grid>
      <ion-row class="ion-align-items-center text-xs text-text-500">
        <ion-col size="6">
          <div>{{ t('market.rwaList.nameCode') }}</div>
        </ion-col>
        <ion-col>
          <div class="text-right">
            {{ t('market.rwaList.stage') }}
          </div>
        </ion-col>
        <ion-col>
          <div class="text-right">
            {{ t('market.rwaList.issueDate') }}
          </div>
        </ion-col>
        <ion-col>
          <div class="text-right">
            {{ t('market.rwaList.subscriptionPrice') }}
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    <div v-for="item in data" :key="item.id" @click="gotoTradeRwa(item.id)">
      <ion-grid>
        <ion-row class="ion-align-items-center my-5">
          <ion-col size="6" class="flex items-center">
            <div class="mr-3">
              <CryptocurrencyColorNuls class="text-3xl" />
            </div>
            <div>
              <div class="text-sm font-semibold mb-1 truncate">
                {{ item.product?.name }}
              </div>
              <div class="flex items-center space-x-2">
                <div class="text-xs text-text-500">
                  {{ item.product?.code }}
                </div>
                <div class="text-xs rounded-md px-1 py-0.5 bg-text-800">
                  {{ item.product.category?.name }}
                </div>
              </div>
            </div>
          </ion-col>
          <ion-col>
            <div class="text-xs text-right">
              {{ item.editionName }}
            </div>
          </ion-col>
          <ion-col>
            <div class="text-xs text-right">
              {{ useDateFormat(item.launchDate!, 'MM/DD') }}
            </div>
          </ion-col>
          <ion-col>
            <div v-if="item.unitPrice" class="text-right">
              <div class="text-lg font-bold text-primary">
                ${{ Number(item.unitPrice) }}
              </div>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
  </div>
</template>

<style lang='css' scoped></style>
