<template>
  <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-3">
    <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">{{ label }}</div>
    <div class="text-lg font-bold" :class="valueColor">
      {{ value }}
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  label: string
  value: string
  color?: 'default' | 'green' | 'yellow' | 'red' | 'blue'
}>()

const valueColor = computed(() => {
  const colors = {
    default: 'text-[var(--brand-text)]',
    green: 'text-green-400',
    yellow: 'text-yellow-400',
    red: 'text-red-400',
    blue: 'text-blue-400'
  }
  return colors[props.color || 'default']
})
</script>
