@props([
    'headers' => [],
    'striped' => false,
    'hoverable' => true,
])

<div class="glass-card rounded-2xl overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full">
            @if(count($headers) > 0)
            <thead>
                <tr class="border-b border-db-border bg-db-surface/50">
                    @foreach($headers as $header)
                    <th class="px-6 py-4 text-left text-xs font-semibold text-db-text-muted uppercase tracking-wider {{ $header['class'] ?? '' }}">
                        {{ $header['label'] ?? $header }}
                    </th>
                    @endforeach
                </tr>
            </thead>
            @elseif(isset($header))
            <thead>
                {{ $header }}
            </thead>
            @endif

            <tbody class="divide-y divide-db-border">
                {{ $slot }}
            </tbody>
        </table>
    </div>
</div>