@props(['headers', 'rows'])

<div
    class="overflow-hidden rounded-2xl border border-slate-100 dark:border-white/5 bg-white dark:bg-berry-light shadow-sm">
    <div class="overflow-x-auto">
        <table class="w-full text-left text-sm">
            <thead>
                <tr class="border-b border-slate-100 dark:border-white/10 bg-slate-50/50 dark:bg-white/5">
                    @foreach($headers as $header)
                        <th class="px-6 py-4 font-bold uppercase tracking-wider text-xs text-slate-400 dark:text-slate-500">
                            {{ $header }}
                        </th>
                    @endforeach
                    <th
                        class="px-6 py-4 font-bold uppercase tracking-wider text-xs text-slate-400 dark:text-slate-500 text-right">
                        Acciones
                    </th>
                </tr>
            </thead>
            <tbody class="divide-slate-100 dark:divide-white/5">
                {{ $slot }}
            </tbody>
        </table>
    </div>
</div>

<!-- Example usage for rows (put inside tbody slot):
<tr class="group hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
    <td class="px-6 py-4 font-medium text-slate-700 dark:text-slate-200">#ORD-001</td>
    <td class="px-6 py-4 text-slate-500 dark:text-slate-400">Juan Pérez</td>
    <td class="px-6 py-4">
        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold bg-brand-green/10 text-brand-green border border-brand-green/20">
            <span class="w-1.5 h-1.5 rounded-full bg-brand-green"></span>
            Entregado
        </span>
    </td>
    <td class="px-6 py-4 text-right">
        <button class="text-slate-400 hover:text-brand-orange transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
        </button>
    </td>
</tr>
-->