@props(['headers', 'empty' => 'No data available for this period.'])

<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    @foreach ($headers as $header)
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider {{ $loop->first ? '' : 'text-right' }}">
                            {{ $header }}
                        </th>
                    @endforeach
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {{ $slot }}
            </tbody>
        </table>

        @if (trim((string) $slot) === '')
            <div class="px-6 py-12 text-center text-sm text-gray-500">{{ $empty }}</div>
        @endif
    </div>
</div>