<template>
  <UCard :ui="cardUi">
    <div class="flex items-center gap-4">
      <div
        class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0"
        :class="bgClass"
      >
        <UIcon :name="icon" class="w-5 h-5" :class="iconClass" />
      </div>
      <div>
        <p class="text-2xl font-bold text-white leading-none">{{ value.toLocaleString() }}</p>
        <p class="text-xs text-gray-400 mt-1">{{ label }}</p>
      </div>
    </div>
  </UCard>
</template>

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

const cardUi = {
  base: 'bg-gray-900 border border-gray-800',
  body: { base: 'px-4 py-4' },
}

const bgClass = computed(() => ({
  red:    'bg-red-500/15',
  orange: 'bg-orange-500/15',
  yellow: 'bg-yellow-500/15',
  green:  'bg-green-500/15',
  blue:   'bg-blue-500/15',
}[props.color]))

const iconClass = computed(() => ({
  red:    'text-red-400',
  orange: 'text-orange-400',
  yellow: 'text-yellow-400',
  green:  'text-green-400',
  blue:   'text-blue-400',
}[props.color]))
</script>
