@props([
    'type' => 'text', // text | avatar | card | table-row
    'rows' => 5,      // table-row: number of inline bars
    'width' => null,  // text: optional width override, e.g. 'w-1/2'
])

{{--
    Skeleton loader (component.md). Shimmer surface defined in app.css (.skeleton).
    Usage:
      <x-skeleton type="card" />
      <x-skeleton type="text" width="w-1/2" />
      <x-skeleton type="avatar" />
      <x-skeleton type="table-row" :rows="5" />
--}}

@switch($type)
    @case('avatar')
        <div {{ $attributes->merge(['class' => 'skeleton h-10 w-10 rounded-full']) }}></div>
        @break

    @case('card')
        <div {{ $attributes->merge(['class' => 'card space-y-4']) }}>
            <div class="flex items-center gap-3">
                <div class="skeleton h-12 w-12 rounded-xl"></div>
                <div class="flex-1 space-y-2">
                    <div class="skeleton h-3 w-1/3"></div>
                    <div class="skeleton h-5 w-2/3"></div>
                </div>
            </div>
            <div class="skeleton h-3 w-full"></div>
            <div class="skeleton h-3 w-5/6"></div>
        </div>
        @break

    @case('table-row')
        <div {{ $attributes->merge(['class' => 'flex items-center gap-4 px-4 py-3']) }}>
            @for ($i = 0; $i < (int) $rows; $i++)
                <div class="skeleton h-3 flex-1"></div>
            @endfor
        </div>
        @break

    @default
        <div {{ $attributes->merge(['class' => 'skeleton h-3 ' . ($width ?? 'w-full')]) }}></div>
@endswitch