<script setup lang="ts">
/**
 * 文件职责：交易流水统计卡片展示。
 */
import type { FinanceTransactionStatsDto } from '#/api/finance';

import { IconifyIcon } from '@vben/icons';

import { formatCurrency } from '../composables/transaction-page/helpers';

interface Props {
  stats: FinanceTransactionStatsDto;
}

const props = defineProps<Props>();
</script>

<template>
  <div class="ft-stats">
    <div class="ft-stat-card">
      <div class="ft-stat-label">
        <IconifyIcon icon="lucide:trending-up" class="ft-stat-icon" />
        总收入
      </div>
      <div class="ft-stat-value is-green">
        {{ formatCurrency(props.stats.totalIncome) }}
      </div>
    </div>

    <div class="ft-stat-card">
      <div class="ft-stat-label">
        <IconifyIcon icon="lucide:undo-2" class="ft-stat-icon" />
        总退款
      </div>
      <div class="ft-stat-value is-red">
        {{ formatCurrency(props.stats.totalRefund) }}
      </div>
    </div>

    <div class="ft-stat-card">
      <div class="ft-stat-label">
        <IconifyIcon icon="lucide:receipt" class="ft-stat-icon" />
        交易笔数
      </div>
      <div class="ft-stat-value">
        {{ props.stats.totalCount }}
      </div>
    </div>
  </div>
</template>
