<script setup lang="ts">
defineProps<{
  label: string
  value: string | number
  sub?: string
  color?: string
}>()
</script>

<template>
  <div class="stat-card">
    <p class="stat-label">{{ label }}</p>
    <p class="stat-value" :style="color ? { color } : {}">{{ value }}</p>
    <p v-if="sub" class="stat-sub">{{ sub }}</p>
  </div>
</template>

<style scoped>
.stat-card { background: white; border-radius: 11px; padding: 16px; border: 1px solid #e2e8f0; }
.stat-label { font-size: 10.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 8px; }
.stat-value { font-size: 26px; font-weight: 800; color: #0f172a; letter-spacing: -1px; line-height: 1; }
.stat-sub { font-size: 10.5px; color: #64748b; margin-top: 5px; }
</style>
