@props(['headers'])

<div class="bg-white rounded-xl border border-border shadow-sm overflow-hidden">
    <div class="overflow-x-auto custom-scrollbar">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="bg-surface text-xs font-semibold text-text-secondary uppercase tracking-wide border-b border-border">
                    @foreach($headers as $header)
                        <th class="px-6 py-4">{{ $header }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody class="divide-y divide-border/50">
                {{ $slot }}
            </tbody>
        </table>
    </div>
    
    @if(isset($pagination))
        <div class="px-6 py-4 bg-surface/30 border-t border-border">
            {{ $pagination }}
        </div>
    @endif
</div>