<script setup lang="ts">
/**
 * 门店统计卡片区域：
 * - 负责展示统计结果
 * - 不包含业务状态变更逻辑
 */
import type { StatCardItem } from '../types';

import { Card, Col, Row, Statistic } from 'ant-design-vue';

interface Props {
  items: StatCardItem[];
}

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

<template>
  <Row :gutter="16" class="store-stats-row">
    <Col v-for="item in props.items" :key="item.title" :span="6">
      <Card :bordered="false" hoverable>
        <Statistic
          :title="item.title"
          :value="item.value"
          :value-style="{ color: item.color, fontWeight: 700 }"
        />
      </Card>
    </Col>
  </Row>
</template>
