@props(['type' => 'default', 'lines' => 3, 'height' => 'h-4'])

@php
    $skeletonTypes = [
        'text' => 'h-4 bg-gray-200 rounded',
        'title' => 'h-6 bg-gray-200 rounded',
        'button' => 'h-10 bg-gray-200 rounded-lg',
        'input' => 'h-12 bg-gray-200 rounded-lg',
        'card' => 'h-32 bg-gray-200 rounded-lg',
        'avatar' => 'w-8 h-8 bg-gray-200 rounded-full',
        'icon' => 'w-5 h-5 bg-gray-200 rounded',
        'image' => 'w-8 h-8 bg-gray-200 rounded object-cover',
    ];
    
    $skeletonClass = $skeletonTypes[$type] ?? $skeletonTypes['text'];
@endphp

<div class="animate-pulse">
    @if ($type === 'card')
        <div class="{{ $skeletonClass }}"></div>
    @elseif ($type === 'avatar' || $type === 'icon' || $type === 'image')
        <div class="{{ $skeletonClass }}"></div>
    @else
        @for ($i = 0; $i < $lines; $i++)
            <div class="{{ $skeletonClass }} {{ $i === $lines - 1 ? 'w-3/4' : 'w-full' }} {{ $i > 0 ? 'mt-2' : '' }}"></div>
        @endfor
    @endif
</div>