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

<script setup lang="ts" name="StatCardList">
defineProps<{
  items: Array<{ key: string; title: string; value: string }>;
}>();
</script>

<style scoped lang="scss">
.stat-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.stat-item {
  padding: 16px;
  background: var(--el-fill-color-light);
  border-radius: 8px;
  .stat-title {
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--el-text-color-regular);
  }
  .stat-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--el-text-color-primary);
  }
}

@media (width <= 1200px) {
  .stat-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (width <= 768px) {
  .stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 600px) {
  .stat-cards {
    grid-template-columns: 1fr;
  }
}
</style>
