<template>
  <div class="stat-item" :style="{ '--stat-color': color }">
    <span class="stat-count">{{ count }}</span>
    <span class="stat-title">{{ title }}</span>
  </div>
</template>

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

<style scoped>
.stat-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.stat-item:hover {
  background: var(--color-bg-hover);
}

.stat-count {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  color: var(--stat-color);
  font-family: var(--font-family-mono);
}

.stat-title {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: capitalize;
}
</style>
