<template>
  <div class="stat-cards">
    <div class="stat-card" v-for="item in data" :key="item.label">
      <div class="stat-value">{{ item.value }}</div>
      <div class="stat-label">{{ item.label }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
export interface StatItem {
  value: string | number;
  label: string;
}

defineProps<{
  data: StatItem[];
}>();
</script>

<style scoped lang="scss">
.stat-cards {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;

  .stat-card {
    flex: 1;
    padding: 20px;
    background: #fafafa;
    border-radius: 4px;
    text-align: center;

    .stat-value {
      font-size: 28px;
      font-weight: bold;
      color: #333;
      margin-bottom: 8px;
    }

    .stat-label {
      font-size: 14px;
      color: #999;
    }
  }
}
</style>
