<script setup lang="ts">
import type { MemberListStatsDto } from '#/api/member';

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

interface Props {
  stats: MemberListStatsDto;
}

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

<template>
  <div class="mm-stats">
    <div class="mm-stat-card">
      <div class="mm-stat-label">会员总数</div>
      <div class="mm-stat-value blue">
        {{ formatInteger(props.stats.totalMembers) }}
      </div>
    </div>

    <div class="mm-stat-card">
      <div class="mm-stat-label">本月新增</div>
      <div class="mm-stat-value green">
        {{ formatInteger(props.stats.monthlyNewMembers) }}
      </div>
    </div>

    <div class="mm-stat-card">
      <div class="mm-stat-label">活跃会员</div>
      <div class="mm-stat-value">
        {{ formatInteger(props.stats.activeMembers) }}
      </div>
      <div class="mm-stat-sub">30天内有消费</div>
    </div>

    <div class="mm-stat-card">
      <div class="mm-stat-label">沉睡会员</div>
      <div class="mm-stat-value orange">
        {{ formatInteger(props.stats.dormantMembers) }}
      </div>
    </div>
  </div>
</template>
