<template>
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-5 flex items-center justify-between">
        <div>
            <div class="text-sm text-gray-500">{{ title }}</div>
            <div class="mt-1 text-2xl font-semibold text-gray-900">{{ value }}</div>
            <div v-if="subtitle" class="mt-1 text-xs text-gray-500">{{ subtitle }}</div>
        </div>
        <slot name="icon">
            <template v-if="icon">
                <div class="w-10 h-10 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center">
                    <i :class="`${icon} text-[${color}] text-2xl`" />
                </div>
            </template>
            <template v-else>
                <div class="w-10 h-10 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path
                            d="M2 10a8 8 0 1116 0 8 8 0 01-16 0zm9-3a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"/>
                    </svg>
                </div>
            </template>
        </slot>
    </div>
</template>

<script setup>
const props = defineProps({
    title: { type: String, required: true },
    value: { type: [String, Number], required: true },
    subtitle: { type: String, default: '' },
    icon: { type: String, default: null },
    color: { type: String, default: '#2563eb' }
})
</script>

