<template>
    <div :class="[
        'rounded-2xl p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5',
        colorClasses
    ]">
        <div class="flex items-start justify-between">
            <div>
                <p class="text-sm font-medium opacity-80">{{ label }}</p>
                <p class="mt-2 text-3xl font-bold tracking-tight">{{ value }}</p>
                <p v-if="subtitle" class="mt-1 text-sm opacity-70">{{ subtitle }}</p>
            </div>
            <div :class="['p-3 rounded-xl', iconBg]">
                <slot name="icon">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                    </svg>
                </slot>
            </div>
        </div>
    </div>
</template>

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

const props = defineProps({
    label: String,
    value: [String, Number],
    subtitle: String,
    color: { type: String, default: 'primary' },
});

const colorClasses = computed(() => ({
    primary: 'bg-gradient-to-br from-primary-500 to-primary-700 text-white',
    accent: 'bg-gradient-to-br from-accent-500 to-accent-700 text-white',
    emerald: 'bg-gradient-to-br from-emerald-500 to-emerald-700 text-white',
    amber: 'bg-gradient-to-br from-amber-500 to-amber-700 text-white',
    rose: 'bg-gradient-to-br from-rose-500 to-rose-700 text-white',
    purple: 'bg-gradient-to-br from-purple-500 to-purple-700 text-white',
    white: 'bg-white border border-surface-200 text-surface-800 shadow-sm',
}[props.color] || 'bg-white border border-surface-200 text-surface-800'));

const iconBg = computed(() => ({
    primary: 'bg-white/20',
    accent: 'bg-white/20',
    emerald: 'bg-white/20',
    amber: 'bg-white/20',
    rose: 'bg-white/20',
    purple: 'bg-white/20',
    white: 'bg-surface-100',
}[props.color] || 'bg-surface-100'));
</script>
