<template>
  <div class="instance-card p-6">
    <div class="flex items-center justify-between mb-4">
      <div
        class="w-10 h-10 rounded-lg flex items-center justify-center"
        :class="iconBgClass"
      >
        <UIcon :name="icon" class="w-5 h-5" :class="iconClass" />
      </div>
      <div v-if="total" class="text-sm text-[var(--wa-text-muted)]">
        de {{ total }}
      </div>
    </div>

    <div class="text-2xl font-bold text-[var(--wa-text)]">{{ value }}</div>
    <div class="text-sm text-[var(--wa-text-muted)]">{{ title }}</div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  title: string
  value: number | string
  total?: number
  icon: string
  color?: 'green' | 'blue' | 'purple' | 'amber' | 'red'
}

const props = withDefaults(defineProps<Props>(), {
  color: 'green'
})

const iconBgClass = computed(() => {
  const classes: Record<string, string> = {
    green: 'bg-green-500/20',
    blue: 'bg-blue-500/20',
    purple: 'bg-purple-500/20',
    amber: 'bg-amber-500/20',
    red: 'bg-red-500/20'
  }
  return classes[props.color]
})

const iconClass = computed(() => {
  const classes: Record<string, string> = {
    green: 'text-green-500',
    blue: 'text-blue-500',
    purple: 'text-purple-500',
    amber: 'text-amber-500',
    red: 'text-red-500'
  }
  return classes[props.color]
})
</script>
