@props([
    'lines'  => 3,
    'avatar' => false,
    'card'   => true,
    'height' => null,
])

@if($height)
    <div class="animate-skeleton w-full rounded-md bg-muted {{ $height }}"></div>
@else
    <div @class(['rounded-xl border border-border bg-card p-6 shadow-card' => $card])>
        <div class="animate-skeleton space-y-4">
            @if($avatar)
                <div class="flex items-center gap-4">
                    <div class="h-12 w-12 flex-shrink-0 rounded-full bg-muted"></div>
                    <div class="flex-1 space-y-2">
                        <div class="h-4 w-3/4 rounded bg-muted"></div>
                        <div class="h-3 w-1/2 rounded bg-muted"></div>
                    </div>
                </div>
            @endif

            <div class="space-y-2">
                @foreach(range(1, $lines) as $i)
                    <div class="h-3 rounded bg-muted animate-skeleton {{ $i === $lines ? 'w-2/3' : 'w-full' }}"></div>
                @endforeach
            </div>
        </div>
    </div>
@endif