<template>
  <div
    class="p-4 rounded-lg border transition-all"
    :class="[variantClasses, props.class]"
  >
    <div class="flex flex-col">
      <span class="text-xs uppercase tracking-wide opacity-80 mb-1">{{ label }}</span>
      <div class="flex items-baseline gap-2">
        <span class="text-2xl font-bold">{{ value }}</span>
        <span v-if="unit" class="text-sm font-bold opacity-70">{{ unit }}</span>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  label: string
  value: string | number
  unit?: string
  variant?: 'default' | 'primary' | 'success' | 'danger' | 'warning' | 'info'
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'default'
})

const variantClasses = computed(() => {
  const variants = {
    default: 'bg-[var(--brand-surface)] border-[var(--brand-border)] text-[var(--brand-text)]',
    primary: 'bg-[var(--brand-surface)] border-[var(--brand-primary-strong)] text-[var(--brand-primary)]',
    success: 'bg-[var(--brand-surface)] border-green-600/30 text-green-400',
    danger: 'bg-[var(--brand-surface)] border-red-600/30 text-red-400',
    warning: 'bg-[var(--brand-surface)] border-yellow-600/30 text-yellow-400',
    info: 'bg-[var(--brand-surface)] border-cyan-600/30 text-cyan-400'
  }
  return variants[props.variant]
})
</script>