@props(['type' => 'card', 'rows' => 5])

@php
$shimmer = 'animate-pulse bg-slate-200 dark:bg-slate-700 rounded';
@endphp

@if($type === 'kpi-row')
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        @foreach(range(1, 4) as $i)
            <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-5">
                <div class="{{ $shimmer }} h-4 w-24 mb-3"></div>
                <div class="{{ $shimmer }} h-8 w-20 mb-2"></div>
                <div class="{{ $shimmer }} h-3 w-32"></div>
            </div>
        @endforeach
    </div>

@elseif($type === 'chart')
    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
        <div class="{{ $shimmer }} h-4 w-32 mb-4"></div>
        <div class="{{ $shimmer }} h-64 w-full rounded-lg"></div>
    </div>

@elseif($type === 'table')
    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
        <div class="p-4 border-b border-slate-200 dark:border-slate-700">
            <div class="{{ $shimmer }} h-5 w-40"></div>
        </div>
        <div class="divide-y divide-slate-200 dark:divide-slate-700">
            @foreach(range(1, $rows) as $i)
                <div class="px-4 py-3 flex items-center gap-4">
                    <div class="{{ $shimmer }} h-8 w-8 rounded-full flex-shrink-0"></div>
                    <div class="flex-1">
                        <div class="{{ $shimmer }} h-4 w-48 mb-1"></div>
                        <div class="{{ $shimmer }} h-3 w-32"></div>
                    </div>
                    <div class="{{ $shimmer }} h-6 w-16 rounded-full"></div>
                </div>
            @endforeach
        </div>
    </div>

@elseif($type === 'card')
    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
        <div class="{{ $shimmer }} h-5 w-40 mb-4"></div>
        <div class="{{ $shimmer }} h-4 w-full mb-2"></div>
        <div class="{{ $shimmer }} h-4 w-3/4 mb-2"></div>
        <div class="{{ $shimmer }} h-4 w-1/2"></div>
    </div>

@elseif($type === 'sidebar')
    <div class="space-y-2 p-4">
        @foreach(range(1, 6) as $i)
            <div class="flex items-center gap-3 px-3 py-2">
                <div class="{{ $shimmer }} h-5 w-5 rounded flex-shrink-0"></div>
                <div class="{{ $shimmer }} h-4 w-28"></div>
            </div>
        @endforeach
    </div>
@endif