<script setup lang="ts">
/**
 * 文件职责：次卡使用记录统计卡片。
 */
import type { PunchCardUsageStatsViewModel } from '../types';

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

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

<template>
  <div class="mpc-record-stats">
    <div class="mpc-stat-card">
      <span class="mpc-stat-icon mpc-stat-blue">
        <IconifyIcon icon="lucide:clock-3" />
      </span>
      <div class="mpc-stat-main">
        <div class="mpc-stat-value">{{ stats.todayUsedCount }}</div>
        <div class="mpc-stat-label">今日使用</div>
      </div>
    </div>

    <div class="mpc-stat-card">
      <span class="mpc-stat-icon mpc-stat-cyan">
        <IconifyIcon icon="lucide:calendar-days" />
      </span>
      <div class="mpc-stat-main">
        <div class="mpc-stat-value">{{ stats.monthUsedCount }}</div>
        <div class="mpc-stat-label">本月使用</div>
      </div>
    </div>

    <div class="mpc-stat-card">
      <span class="mpc-stat-icon mpc-stat-orange">
        <IconifyIcon icon="lucide:alarm-clock" />
      </span>
      <div class="mpc-stat-main">
        <div class="mpc-stat-value mpc-stat-value-orange">
          {{ stats.expiringSoonCount }}
        </div>
        <div class="mpc-stat-label">即将过期（7天内）</div>
      </div>
    </div>
  </div>
</template>
