<script setup lang="ts">
import type { PointMallRecordStatsViewModel } from '../types';

import { formatInteger } from '../composables/points-mall-page/helpers';

defineProps<{
  stats: PointMallRecordStatsViewModel;
}>();
</script>

<template>
  <div class="mpm-stats mpm-record-stats">
    <div class="mpm-stat-card">
      <div class="mpm-stat-label">今日兑换</div>
      <div class="mpm-stat-value is-primary">
        {{ formatInteger(stats.todayRedeemCount) }}
      </div>
    </div>
    <div class="mpm-stat-card">
      <div class="mpm-stat-label">待领取实物</div>
      <div class="mpm-stat-value is-orange">
        {{ formatInteger(stats.pendingPhysicalCount) }}
      </div>
    </div>
    <div class="mpm-stat-card">
      <div class="mpm-stat-label">本月消耗积分</div>
      <div class="mpm-stat-value">
        {{ formatInteger(stats.currentMonthUsedPoints) }}
      </div>
    </div>
  </div>
</template>
