@props(['headers', 'data'])
<div {!! $attributes->merge(['class' => 'overflow-x-auto relative sm:rounded-lg']) !!}>
    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                @foreach ($headers as $head)
                    <th scope="col" class="px-6 py-3">
                        {{ $head }}
                    </th>
                @endforeach
            </tr>
        </thead>
        <tbody>
            {{ $slot }}
        </tbody>
    </table>

    @if (isset($pagination))
        {{ $pagination }}
    @endif
</div>