<script setup>
defineProps({
    label: { type: String, required: true },
    value: { type: String, required: true },
    icon: { type: String, default: 'pi pi-chart-bar' },
    color: { type: String, default: 'indigo' },
    trend: { type: String, default: null } // 'up' | 'down' | 'neutral'
});

const colorMap = {
    indigo: {
        bg: 'bg-indigo-50 dark:bg-indigo-900/20',
        border: 'border-indigo-200 dark:border-indigo-800',
        label: 'text-indigo-500 dark:text-indigo-400',
        value: 'text-indigo-800 dark:text-indigo-200',
        iconBg: 'bg-indigo-100 dark:bg-indigo-900/40',
        iconColor: 'text-indigo-600 dark:text-indigo-300'
    },
    blue: {
        bg: 'bg-blue-50 dark:bg-blue-900/20',
        border: 'border-blue-200 dark:border-blue-800',
        label: 'text-blue-500 dark:text-blue-400',
        value: 'text-blue-800 dark:text-blue-200',
        iconBg: 'bg-blue-100 dark:bg-blue-900/40',
        iconColor: 'text-blue-600 dark:text-blue-300'
    },
    violet: {
        bg: 'bg-violet-50 dark:bg-violet-900/20',
        border: 'border-violet-200 dark:border-violet-800',
        label: 'text-violet-500 dark:text-violet-400',
        value: 'text-violet-800 dark:text-violet-200',
        iconBg: 'bg-violet-100 dark:bg-violet-900/40',
        iconColor: 'text-violet-600 dark:text-violet-300'
    },
    amber: {
        bg: 'bg-amber-50 dark:bg-amber-900/20',
        border: 'border-amber-200 dark:border-amber-800',
        label: 'text-amber-500 dark:text-amber-400',
        value: 'text-amber-800 dark:text-amber-200',
        iconBg: 'bg-amber-100 dark:bg-amber-900/40',
        iconColor: 'text-amber-600 dark:text-amber-300'
    },
    emerald: {
        bg: 'bg-emerald-50 dark:bg-emerald-900/20',
        border: 'border-emerald-200 dark:border-emerald-800',
        label: 'text-emerald-500 dark:text-emerald-400',
        value: 'text-emerald-800 dark:text-emerald-200',
        iconBg: 'bg-emerald-100 dark:bg-emerald-900/40',
        iconColor: 'text-emerald-600 dark:text-emerald-300'
    },
    orange: {
        bg: 'bg-orange-50 dark:bg-orange-900/20',
        border: 'border-orange-200 dark:border-orange-800',
        label: 'text-orange-500 dark:text-orange-400',
        value: 'text-orange-800 dark:text-orange-200',
        iconBg: 'bg-orange-100 dark:bg-orange-900/40',
        iconColor: 'text-orange-600 dark:text-orange-300'
    }
};
</script>

<template>
    <div :class="['exec-card rounded-xl border p-4 flex flex-col gap-2 transition hover:-translate-y-0.5 hover:shadow-md', colorMap[color].border, colorMap[color].bg]">
        <div class="flex items-center justify-between">
            <p class="text-xs font-semibold uppercase tracking-widest truncate" :class="colorMap[color].label">{{ label }}</p>
            <span class="inline-flex h-8 w-8 items-center justify-center rounded-full shrink-0" :class="colorMap[color].iconBg">
                <i :class="[icon, 'text-sm', colorMap[color].iconColor]" />
            </span>
        </div>
        <p class="text-xl font-black leading-none" :class="colorMap[color].value">{{ value }}</p>
        <div v-if="trend" class="flex items-center gap-1 text-xs font-medium">
            <i :class="['pi', trend === 'up' ? 'pi-arrow-up text-emerald-500' : trend === 'down' ? 'pi-arrow-down text-rose-500' : 'pi-minus text-surface-400']" />
            <span :class="trend === 'up' ? 'text-emerald-600' : trend === 'down' ? 'text-rose-600' : 'text-surface-400'">
                {{ trend === 'up' ? 'Выше среднего' : trend === 'down' ? 'Ниже среднего' : 'Нейтрально' }}
            </span>
        </div>
    </div>
</template>
