<template>
  <div class="bg-white dark:bg-gray-800 rounded-xl border dark:border-gray-700 p-5 flex flex-col items-end text-right">
    <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">{{ label }}</p>
    <div class="flex items-baseline gap-2">
      <p class="text-3xl font-bold text-gray-900 dark:text-gray-100">
        {{ formattedValue }}
      </p>
      <span
        v-if="trend !== undefined"
        class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-semibold"
        :class="trendClass"
      >
        +{{ trend }}%
      </span>
    </div>
    <!-- Mini progress bar -->
    <div class="w-full mt-3 bg-gray-100 dark:bg-gray-700 rounded-full h-1.5">
      <div
        class="h-1.5 rounded-full transition-all duration-500"
        :class="barColor"
        :style="{ width: `${Math.min(trend * 3, 100)}%` }"
      ></div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  label: { type: String, required: true },
  value: { type: [Number, String], required: true },
  trend: { type: Number, default: undefined },
  color: { type: String, default: 'blue' },
})

const formattedValue = computed(() => {
  const num = typeof props.value === 'number' ? props.value : parseFloat(props.value)
  if (isNaN(num)) return props.value
  return new Intl.NumberFormat('en-US').format(num)
})

const trendClass = computed(() => {
  return 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
})

const barColor = computed(() => {
  return props.color === 'green' ? 'bg-green-500' : 'bg-blue-500'
})
</script>
