@props([
    'lines' => 3,
    'type' => 'text',
])

@if($type === 'text')
    {{-- Text skeleton - multiple lines with last line shorter --}}
    <div {{ $attributes->merge(['class' => 'space-y-3']) }}>
        @for($i = 0; $i < $lines; $i++)
            <div class="skeleton h-4 {{ $i === $lines - 1 ? 'w-2/3' : 'w-full' }}"></div>
        @endfor
    </div>
@elseif($type === 'card')
    {{-- Card skeleton - image placeholder + text lines --}}
    <div {{ $attributes->merge(['class' => 'space-y-4']) }}>
        <div class="skeleton h-40 w-full"></div>
        <div class="space-y-3">
            <div class="skeleton h-4 w-3/4"></div>
            <div class="skeleton h-4 w-full"></div>
            <div class="skeleton h-4 w-2/3"></div>
        </div>
    </div>
@elseif($type === 'avatar')
    {{-- Avatar skeleton - circular placeholder --}}
    <div class="skeleton h-12 w-12 rounded-full {{ $attributes->get('class') }}"></div>
@elseif($type === 'button')
    {{-- Button skeleton --}}
    <div class="skeleton h-10 w-24 rounded-md {{ $attributes->get('class') }}"></div>
@elseif($type === 'table-row')
    {{-- Table row skeleton --}}
    <div {{ $attributes->merge(['class' => 'flex items-center gap-4']) }}>
        <div class="skeleton h-4 w-1/4"></div>
        <div class="skeleton h-4 w-1/3"></div>
        <div class="skeleton h-4 w-1/4"></div>
        <div class="skeleton h-4 w-1/6"></div>
    </div>
@endif