@props([
    'headers' => [],
    'rows' => [],
    'striped' => true,
    'hover' => true,
    'sticky' => true,
])

<div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-soft overflow-hidden">
    <div class="overflow-x-auto">
        <table @class([
            'w-full text-sm',
            'table-sticky' => $sticky,
        ])>
            <thead>
                <tr class="bg-slate-50 dark:bg-slate-900/50 border-b border-slate-200 dark:border-slate-800">
                    @foreach($headers as $h)
                        <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 whitespace-nowrap">
                            {{ is_array($h) ? $h['label'] : $h }}
                        </th>
                    @endforeach
                    @if(isset($actions) && $actions)
                        <th class="px-4 py-3 text-right text-[11px] font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">Action</th>
                    @endif
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                {{ $slot }}
            </tbody>
        </table>
    </div>
    @isset($pagination)
        <div class="px-4 py-3 border-t border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/30">
            {{ $pagination }}
        </div>
    @endisset
</div>
