<script setup>
defineProps({
    label: String,
    value: [Number, String],
    color: { type: String, default: 'blue' },
    icon: { type: String, default: 'chart' },
})
</script>

<template>
    <div class="rounded-xl bg-white p-5 shadow-sm border border-gray-100">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-500">{{ label }}</p>
                <p class="mt-1 text-3xl font-bold text-gray-900">{{ value }}</p>
            </div>
            <div :class="['flex h-12 w-12 items-center justify-center rounded-xl', `bg-${color}-100`]">
                <span :class="[`text-${color}-600`, 'text-xl font-bold']">{{ typeof value === 'number' ? '#' : '•' }}</span>
            </div>
        </div>
    </div>
</template>
