<script setup lang="ts">
withDefaults(
  defineProps<{
    label: string
    value: string | number
    delta?: string
    deltaTone?: 'up' | 'down'
    hint?: string
  }>(),
  { deltaTone: 'up' },
)
</script>

<template>
  <div class="stat">
    <Eyebrow>{{ label }}</Eyebrow>
    <div class="value">{{ value }}</div>
    <div v-if="delta || hint" class="meta">
      <span v-if="delta" class="delta" :data-tone="deltaTone">{{ delta }}</span>
      <Mono v-if="hint" dim>{{ hint }}</Mono>
    </div>
  </div>
</template>

<style scoped>
.stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.delta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}
.delta[data-tone='up']   { background: rgba(31, 138, 91, 0.12); color: var(--ok); }
.delta[data-tone='down'] { background: rgba(226, 48, 48, 0.12); color: var(--bad); }
</style>
