@props([
    'type' => 'text', // text, table, card, circle
    'count' => 1,
    'height' => '20px',
    'width' => '100%',
])

<div class="skeleton-wrapper">
    @for($i = 0; $i < $count; $i++)
        @if($type === 'text')
            <div class="skeleton-item skeleton-text mb-2" style="height: {{ $height }}; width: {{ $width }};"></div>
        @elseif($type === 'circle')
            <div class="skeleton-item skeleton-circle mb-2" style="height: {{ $height }}; width: {{ $height }};"></div>
        @elseif($type === 'table')
            <div class="card mb-3 border-0 shadow-sm overflow-hidden">
                <div class="card-body p-0">
                    <div class="skeleton-item skeleton-table-header" style="height: 40px;"></div>
                    <div class="skeleton-item skeleton-text mt-2 mb-2 ml-3" style="height: 20px; width: 90%;"></div>
                    <div class="skeleton-item skeleton-text mt-2 mb-2 ml-3" style="height: 20px; width: 85%;"></div>
                    <div class="skeleton-item skeleton-text mt-2 mb-3 ml-3" style="height: 20px; width: 95%;"></div>
                </div>
            </div>
        @elseif($type === 'card')
            <div class="card mb-3 border-0 shadow-sm overflow-hidden" style="width: {{ $width }};">
                <div class="skeleton-item" style="height: 150px; width: 100%;"></div>
                <div class="card-body">
                    <div class="skeleton-item skeleton-text mb-2" style="height: 20px; width: 70%;"></div>
                    <div class="skeleton-item skeleton-text" style="height: 15px; width: 100%;"></div>
                </div>
            </div>
        @endif
    @endfor
</div>

@pushonce('css')
<style>
    .skeleton-item {
        background: #eee;
        background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
        border-radius: 4px;
        background-size: 200% 100%;
        animation: 1.5s shine linear infinite;
    }

    .skeleton-circle {
        border-radius: 50%;
    }

    .skeleton-table-header {
        background: #e0e0e0;
        border-radius: 0;
    }

    @keyframes shine {
        to {
            background-position-x: -200%;
        }
    }
</style>
@endpushonce