{{--
Usage:
@include('layouts.components.skeleton-loader', ['type' => 'dashboard'])
@include('layouts.components.skeleton-loader', ['type' => 'table'])
@include('layouts.components.skeleton-loader', ['type' => 'profile'])
--}}

@php $type = $type ?? 'dashboard'; @endphp

@if($type === 'dashboard')
    {{-- 4 stat cards + 2 large cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        @for($i = 0; $i < 4; $i++)
            <div class="skeleton-stat"></div>
        @endfor
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <div class="skeleton-card h-64"></div>
        <div class="skeleton-card h-64"></div>
    </div>
@endif

@if($type === 'table')
    {{-- Toolbar + 6 rows --}}
    <div class="card-static">
        <div class="p-4 border-b border-gray-100 flex items-center gap-3">
            <div class="skeleton h-9 w-48 rounded-lg"></div>
            <div class="skeleton h-9 w-24 rounded-lg"></div>
        </div>
        <div class="p-4 space-y-3">
            @for($i = 0; $i < 6; $i++)
                <div class="skeleton-row rounded"></div>
            @endfor
        </div>
    </div>
@endif

@if($type === 'profile')
    <div class="flex items-center gap-4 mb-6">
        <div class="skeleton w-20 h-20 rounded-full"></div>
        <div class="space-y-2">
            <div class="skeleton-title"></div>
            <div class="skeleton-text w-32"></div>
        </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="skeleton-card h-48"></div>
        <div class="skeleton-card h-48"></div>
    </div>
@endif

@if($type === 'cards')
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        @for($i = 0; $i < 6; $i++)
            <div class="skeleton-card"></div>
        @endfor
    </div>
@endif