<template>
  <div class="stats-section">
    <span class="section-title">{{ title }}</span>
    <div class="section-items">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineProps<{
  title: string
}>()
</script>

<style scoped>
.stats-section {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.section-items {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
</style>
