@props([
    'type' => 'text',
    'lines' => 1,
    'width' => 'full'
])

@php
$widths = [
    'full' => 'w-full',
    '3/4' => 'w-3/4',
    '1/2' => 'w-1/2',
    '1/3' => 'w-1/3',
    '1/4' => 'w-1/4',
];
@endphp

@if($type === 'text')
    <div class="space-y-2 animate-pulse">
        @for($i = 0; $i < $lines; $i++)
            <div class="h-4 bg-slate-200 dark:bg-slate-700 rounded {{ $i === $lines - 1 && $lines > 1 ? 'w-3/4' : $widths[$width] }}"></div>
        @endfor
    </div>
@elseif($type === 'avatar')
    <div class="w-10 h-10 bg-slate-200 dark:bg-slate-700 rounded-full animate-pulse"></div>
@elseif($type === 'image')
    <div class="w-full aspect-square bg-slate-200 dark:bg-slate-700 rounded-xl animate-pulse"></div>
@elseif($type === 'card')
    <div class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 p-6 animate-pulse">
        <div class="flex items-center space-x-4">
            <div class="w-12 h-12 bg-slate-200 dark:bg-slate-700 rounded-xl"></div>
            <div class="flex-1 space-y-2">
                <div class="h-4 bg-slate-200 dark:bg-slate-700 rounded w-3/4"></div>
                <div class="h-3 bg-slate-200 dark:bg-slate-700 rounded w-1/2"></div>
            </div>
        </div>
    </div>
@elseif($type === 'table-row')
    <tr class="animate-pulse">
        <td class="px-6 py-4"><div class="h-4 bg-slate-200 dark:bg-slate-700 rounded w-20"></div></td>
        <td class="px-6 py-4">
            <div class="flex items-center">
                <div class="w-8 h-8 bg-slate-200 dark:bg-slate-700 rounded-lg mr-3"></div>
                <div class="space-y-1">
                    <div class="h-4 bg-slate-200 dark:bg-slate-700 rounded w-24"></div>
                    <div class="h-3 bg-slate-200 dark:bg-slate-700 rounded w-16"></div>
                </div>
            </div>
        </td>
        <td class="px-6 py-4"><div class="h-4 bg-slate-200 dark:bg-slate-700 rounded w-16"></div></td>
        <td class="px-6 py-4"><div class="h-6 bg-slate-200 dark:bg-slate-700 rounded-full w-20"></div></td>
        <td class="px-6 py-4"><div class="h-8 w-8 bg-slate-200 dark:bg-slate-700 rounded-lg"></div></td>
    </tr>
@endif