@props(['stats' => []])

@php
    $stats = is_array($stats) ? $stats : [];
@endphp

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" {{ $attributes }}>
    @forelse($stats as $stat)
        @php
            $label = $stat['label'] ?? '';
            $value = $stat['value'] ?? '';
            $trend = $stat['trend'] ?? null;
            $trendLabel = $stat['trend_label'] ?? '';
            $icon = $stat['icon'] ?? '';
            $color = $stat['color'] ?? 'primary';
            $format = $stat['format'] ?? 'raw';

            $colorMap = [
                'primary' => 'bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400',
                'success' => 'bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400',
                'warning' => 'bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400',
                'danger'  => 'bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400',
            ];
            $iconBg = $colorMap[$color] ?? $colorMap['primary'];

            $displayValue = $value;
            if ($format === 'currency') {
                $displayValue = 'GHS ' . number_format((float) $value, 2);
            } elseif ($format === 'percentage') {
                $displayValue = number_format((float) $value, 1) . '%';
            }
        @endphp

        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-5">
            <div class="flex items-start justify-between">
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-slate-500 dark:text-slate-400">{{ $label }}</p>
                    <p class="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100 mt-1">{{ $displayValue }}</p>
                    @if($trend !== null)
                        <div class="flex items-center gap-1 mt-1">
                            @if($trend > 0)
                                <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
                                </svg>
                                <span class="text-xs text-green-600 dark:text-green-400 font-medium">+{{ $trend }}%</span>
                            @elseif($trend < 0)
                                <svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
                                </svg>
                                <span class="text-xs text-red-600 dark:text-red-400 font-medium">{{ $trend }}%</span>
                            @endif
                            @if($trendLabel)
                                <span class="text-xs text-slate-400 dark:text-slate-500">{{ $trendLabel }}</span>
                            @endif
                        </div>
                    @endif
                </div>
                @if($icon)
                    <div class="flex-shrink-0 ml-3">
                        <div class="h-10 w-10 rounded-lg {{ $iconBg }} flex items-center justify-center">
                            <span class="text-lg">{{ $icon }}</span>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    @empty
        {{-- Render nothing if no stats provided --}}
    @endforelse
</div>