{{-- Admin Stat Card Component --}}
{{-- Usage: @include('admin.components.stat_card', ['label' => 'Label', 'value' => 123, 'delta' => '+5%', 'icon' => 'svg-content', 'color' => 'blue']) --}}
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-4 hover:shadow-md transition">
    <div class="flex items-start gap-4">
        <div class="w-12 h-12 flex items-center justify-center rounded-lg bg-{{ $color ?? 'blue' }}-50">
            @if(isset($icon) && str_contains((string)$icon, '<'))
                {{-- raw HTML passed (backwards compatible) --}}
                {!! $icon !!}
            @else
                {{-- Font Awesome class passed (e.g. 'fa-solid fa-users') --}}
                <i class="{{ $icon ?? 'fa-solid fa-chart-line' }} fa-lg text-{{ $color ?? 'blue' }}-600" aria-hidden="true"></i>
            @endif
        </div>
        <div class="flex-1">
            <div class="flex items-center justify-between gap-4">
                <div>
                    <p class="text-sm text-slate-600">{{ $label }}</p>
                    <p class="text-2xl font-bold text-slate-900 mt-1">{{ is_numeric($value) ? number_format($value) : $value }}</p>
                </div>
                @if(isset($delta) && $delta)
                    @php
                        $sign = str_starts_with(trim((string)$delta), '-') ? 'down' : 'up';
                        $deltaClean = trim((string)$delta);
                    @endphp
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-semibold {{ $sign === 'up' ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-700' }}">
                        @if($sign === 'up')
                            <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor"><path d="M5 10l5-5 5 5H5z"/></svg>
                        @else
                            <svg class="w-3 h-3" viewBox="0 0 20 20" fill="currentColor"><path d="M5 10l5 5 5-5H5z"/></svg>
                        @endif
                        <span>{{ $deltaClean }}</span>
                    </div>
                @endif
            </div>

            @if(isset($sparkline) && is_array($sparkline) && count($sparkline) > 0)
                <div class="mt-3">
                    <canvas class="sparkline" data-sparkline='@json($sparkline)' width="120" height="30" aria-hidden="true"></canvas>
                </div>
            @else
                <div class="mt-3 h-3 bg-slate-100 rounded"></div>
            @endif
        </div>
    </div>
</div>