{{-- resources/views/components/skeleton-table.blade.php --}}
@props([
    'columns',
    'rows',
    'height',
    'pages' => 3, // Default to 3 pages if not specified
])

<div wire:loading class="w-100">
    <div class="table-responsive w-100">
        <table class="table mb-0 w-100">
            <thead>
                <tr style="visibility:hidden; height:{{ $height }}">
                    @for ($i = 0; $i < $columns; $i++)
                        <th>&nbsp;</th>
                    @endfor
                </tr>
            </thead>
            <tbody>
                @for ($r = 0; $r < $rows; $r++)
                    <tr style="height:{{ $height }}">
                        @for ($c = 0; $c < $columns; $c++)
                            <td class="align-middle">
                                <div class="skeleton rounded w-100" style="height:1.75rem"></div>
                            </td>
                        @endfor
                    </tr>
                @endfor
            </tbody>
        </table>
    </div>

    {{-- Skeleton pagination --}}
    <div class="d-flex justify-content-end mt-3">
        @for ($i = 0; $i < $pages; $i++)
            <div class="skeleton rounded me-2" style="width: 2.5rem; height:1.5rem"></div>
        @endfor
    </div>
</div>