@props([
    'rows' => 3,
])

{{-- Page-level skeleton placeholder used as Livewire placeholder() during Lazy hydration --}}
<div {{ $attributes->merge(['class' => 'flex flex-col gap-6 animate-pulse']) }} data-testid="page-skeleton">

    {{-- Hero header skeleton --}}
    <div class="flex justify-between items-end gap-6">
        <div class="flex-1 max-w-xl flex flex-col gap-3">
            <div class="h-3 bg-line rounded w-24"></div>
            <div class="h-8 bg-line rounded w-3/5"></div>
            <div class="h-3 bg-line rounded w-4/5"></div>
        </div>
        <div class="h-10 w-40 bg-line rounded-lg"></div>
    </div>

    {{-- Content card skeleton --}}
    <div class="bg-bg-soft border border-line rounded-xl p-5 shadow-sm flex flex-col gap-4">
        @for($i = 0; $i < (int) $rows; $i++)
            <div class="grid grid-cols-[44px_1fr_auto] gap-3 items-center py-2 border-t border-line first:border-t-0">
                <div class="w-10 h-10 rounded-lg bg-line"></div>
                <div class="flex flex-col gap-2">
                    <div class="h-3 bg-line rounded w-3/5"></div>
                    <div class="h-2 bg-line rounded w-2/5"></div>
                </div>
                <div class="h-7 w-20 bg-line rounded-lg"></div>
            </div>
        @endfor
    </div>

</div>