{{--
    Stat Card Component
    Usage: @include('components.dashboard.stat-card', [
        'title' => 'Total Applications',
        'value' => '123',
        'subtitle' => 'All time',
        'icon' => 'document-text', // heroicon name
        'color' => 'blue' // blue, teal, purple, emerald, etc.
    ])
--}}
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
    <div class="flex items-center justify-between">
        <div>
            <p class="text-sm text-slate-600">{{ $title }}</p>
            <p class="text-3xl font-bold text-slate-900 mt-1">{{ $value }}</p>
            <p class="text-xs text-slate-500 mt-2">{{ $subtitle ?? '' }}</p>
        </div>
        @if(isset($icon))
        <div class="w-12 h-12 bg-{{ $color ?? 'blue' }}-500/10 rounded-full flex items-center justify-center">
            @switch($icon)
                @case('document-text')
                    <i class="fa-solid fa-file-lines w-6 h-6 text-{{ $color ?? 'blue' }}-500"></i>
                    @break
                @case('chart-bar')
                    <i class="fa-solid fa-chart-bar w-6 h-6 text-{{ $color ?? 'blue' }}-500"></i>
                    @break
                @case('clock')
                    <i class="fa-solid fa-clock w-6 h-6 text-{{ $color ?? 'blue' }}-500"></i>
                    @break
                @case('briefcase')
                    <i class="fa-solid fa-briefcase w-6 h-6 text-{{ $color ?? 'blue' }}-500"></i>
                    @break
                @default
                    <i class="fa-solid fa-chart-line w-6 h-6 text-{{ $color ?? 'blue' }}-500"></i>
            @endswitch
        </div>
        @endif
    </div>
</div>