@props(['label' => '', 'value' => '', 'trend' => null, 'trendLabel' => '', 'icon' => '', 'color' => 'primary'])

@php
$colorMap = [
    'primary' => 'bg-primary-100 text-primary-600 dark:bg-primary-900/30 dark:text-primary-400',
    'success' => 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400',
    'warning' => 'bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400',
    'danger' => 'bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400',
    'accent' => 'bg-accent-100 text-accent-600 dark:bg-accent-900/30 dark:text-accent-400',
];
$iconClass = $colorMap[$color] ?? $colorMap['primary'];
@endphp

<div class="flex items-center gap-3">
    @if($icon)
        <div class="h-10 w-10 rounded-lg {{ $iconClass }} flex items-center justify-center flex-shrink-0">
            <span class="text-lg">{{ $icon }}</span>
        </div>
    @endif
    <div class="flex-1 min-w-0">
        <p class="text-xs text-slate-500 dark:text-slate-400">{{ $label }}</p>
        <div class="flex items-center gap-2">
            <p class="text-lg font-bold text-slate-900 dark:text-slate-100">{{ $value }}</p>
            @if($trend !== null)
                <span class="text-xs font-medium {{ $trend >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                    {{ $trend >= 0 ? '↑' : '↓' }} {{ abs($trend) }}%
                </span>
            @endif
        </div>
        @if($trendLabel)
            <p class="text-xs text-slate-400">{{ $trendLabel }}</p>
        @endif
    </div>
</div>