@props(['headers' => [], 'minWidth' => 'min-w-[1040px]'])

<div {{ $attributes->merge(['class' => 'overflow-hidden rounded-lg border border-booklio-border bg-white']) }}>
    <div class="overflow-x-auto booklio-scrollbar">
        <table class="{{ $minWidth }} w-full table-auto divide-y divide-booklio-border text-left">
            @if (count($headers))
                <thead class="bg-slate-50">
                    <tr>
                        @foreach ($headers as $header)
                            <th scope="col" class="whitespace-nowrap px-4 py-3 text-left align-top text-xs font-bold uppercase tracking-wide text-booklio-muted">
                                {{ $header }}
                            </th>
                        @endforeach
                    </tr>
                </thead>
            @endif
            <tbody class="divide-y divide-booklio-border bg-white text-sm text-booklio-dark [&_td]:align-top [&_td]:px-4 [&_td]:py-4">
                {{ $slot }}
            </tbody>
        </table>
    </div>
</div>