<template>
  <div class="stats-row">
    <div v-for="(stat, index) in stats" :key="index" class="stat-card">
      <span class="stat-value">{{ stat.value }}</span>
      <span class="stat-label">{{ stat.label }}</span>
    </div>
  </div>
</template>

<script setup>
defineProps({
  stats: { type: Array, required: true, default: () => [] }
})
</script>

<style scoped>
.stats-row {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-light);
}
.stat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-container);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  min-height: var(--stat-card-height);
}
.stat-value {
  font-size: var(--font-3xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1.2;
}
.stat-label {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
}
</style>
