<script setup lang="ts">
interface StatCard {
  label: string
  value: string
  hint: string
}

interface Props {
  stats: StatCard[]
}

defineProps<Props>()
</script>

<template>
  <div class="home-stats-v2">
    <div v-for="item in stats" :key="item.label" class="stat-item">
      <div class="stat-main">
        <strong>{{ item.value }}</strong>
        <span>{{ item.label }}</span>
      </div>
      <small>{{ item.hint }}</small>
    </div>
  </div>
</template>

<style scoped>
.home-stats-v2 {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  min-width: 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  border: 1px solid #eef1f5;
  border-radius: 16px;
  background: #ffffff;
}

.stat-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.stat-item strong {
  font-size: 24px;
  color: #ff6a00;
}

.stat-item span {
  font-weight: 700;
  color: #17233d;
}

.stat-item small {
  margin-top: 4px;
  color: #7b8798;
  font-size: 12px;
}
</style>
