<script setup lang="ts">
defineProps<{ label: string; value: string | number; suffix?: string; trend?: string; loading?: boolean }>()
</script>

<template>
  <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
    <div v-if="loading" class="animate-pulse space-y-3">
      <div class="h-4 bg-gray-200 rounded w-16" />
      <div class="h-8 bg-gray-200 rounded w-24" />
    </div>
    <template v-else>
      <p class="text-sm text-text-secondary mb-2">{{ label }}</p>
      <p class="text-3xl font-bold font-mono text-primary">
        {{ value }}<span v-if="suffix" class="text-lg text-text-secondary ml-1">{{ suffix }}</span>
      </p>
      <p v-if="trend" class="text-xs text-accent mt-1">{{ trend }}</p>
    </template>
  </div>
</template>
