<script setup>
defineProps({
    title: String,
    value: [String, Number],
    subValue: String,
    icon: String,
    color: {
        type: String,
        default: 'blue'
    }
});

const colors = {
    blue: 'text-blue-600 bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400',
    red: 'text-red-600 bg-red-100 dark:bg-red-900/30 dark:text-red-400',
    green: 'text-green-600 bg-green-100 dark:bg-green-900/30 dark:text-green-400',
    yellow: 'text-yellow-600 bg-yellow-100 dark:bg-yellow-900/30 dark:text-yellow-400',
};
</script>

<template>
    <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
        <div class="flex items-center">
            <div :class="['p-3 rounded-full', colors[color]]">
                <!-- Simple Circle as Placeholder for Icon -->
                <div class="w-6 h-6 border-2 border-current rounded-full"></div>
            </div>
            <div class="ml-4 text-gray-500 dark:text-gray-400">
                <p class="text-sm font-medium uppercase tracking-wider">{{ title }}</p>
                <div class="flex items-baseline">
                    <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ value }}</p>
                    <p v-if="subValue" class="ml-2 text-xs font-semibold text-gray-500">{{ subValue }}</p>
                </div>
            </div>
        </div>
    </div>
</template>
