<script lang='ts' setup>
import { client, safeClient } from "@/api";

const { t } = useI18n();

const { data } = await safeClient(client.api.earnings.details.post({
  limit: 6,
  offset: 0,
}));
</script>

<template>
  <ion-list>
    <ion-list-header>
      <h4>{{ t("revenue.monthly.monthRecords") }}</h4>
      <ion-button v-show="data?.data.length" class="text-sm">
        {{ t("revenue.monthly.viewAll") }}
      </ion-button>
    </ion-list-header>
    <ui-empty v-if="!data || data.data.length === 0" class="mt-5" />

    <template v-else>
      <ion-item v-for="item in data?.data" :key="item.id">
        <div class="flex justify-between w-full items-center py-4">
          <div class="flex flex-col gap-1">
            <div class="flex items-center gap-2">
              <div class="text-sm font-medium">
                {{ item.type }}
              </div>
              <ion-badge class="text-xs p-1" color="success">
                {{ item.ledgerEntryId }}
              </ion-badge>
            </div>
            <div class="text-sm font-medium">
              {{ item.relatedAssetName }}
            </div>
            <div class="text-xs text-text-400">
              {{ item.relatedAssetCode }}
            </div>
          </div>
          <div class="text-right">
            <div class="text-base font-semibold">
              {{ formatAmountWithSplit(item.amount) }}
            </div>
            <div class="text-xs text-text-400">
              {{ useDateFormat(item.createdAt) }}
            </div>
          </div>
        </div>
      </ion-item>
    </template>
  </ion-list>
</template>

<style lang='css' scoped>
@reference "tailwindcss";

h4 {
  font-size: var(--title-font-size);
}
</style>
