@props([
    'headers' => [],
])

<div class="overflow-x-auto rounded-xl border border-slate-200 shadow-2xs bg-white">
    <table {{ $attributes->merge(['class' => 'min-w-full divide-y divide-slate-200 text-left rtl:text-right text-xs sm:text-sm']) }}>
        @if(!empty($headers))
            <thead class="bg-slate-50 text-slate-600 font-semibold uppercase tracking-wider text-[11px]">
                <tr>
                    @foreach($headers as $header)
                        <th scope="col" class="px-4 py-3.5">{{ $header }}</th>
                    @endforeach
                </tr>
            </thead>
        @endif
        <tbody class="divide-y divide-slate-100 bg-white text-slate-700">
            {{ $slot }}
        </tbody>
    </table>
</div>