{{-- 
Table Component
Usage:
<x-ui.data.table :headers="['Name', 'Email', 'Role', 'Actions']">
    @foreach($users as $user)
        <tr>
            <td class="px-6 py-4 whitespace-nowrap">{{ $user->name }}</td>
            <td class="px-6 py-4 whitespace-nowrap">{{ $user->email }}</td>
            <td class="px-6 py-4 whitespace-nowrap">{{ $user->role }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                <a href="#" class="text-primary-600 hover:text-primary-900">Edit</a>
            </td>
        </tr>
    @endforeach
</x-ui.data.table>

<x-ui.data.table :headers="['Name', 'Email', 'Role', 'Actions']" striped responsive>
    <!-- Table content -->
</x-ui.data.table>
--}}

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

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

@if($responsive)
<style>
    @media (max-width: 640px) {
        table {
            display: block;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
    }
</style>
@endif

@if($striped)
<style>
    tbody tr:nth-child(odd) {
        background-color: rgba(249, 250, 251, 1);
    }
    .dark tbody tr:nth-child(odd) {
        background-color: rgba(55, 65, 81, 0.5);
    }
</style>
@endif

@if($hover)
<style>
    tbody tr:hover {
        background-color: rgba(243, 244, 246, 1);
    }
    .dark tbody tr:hover {
        background-color: rgba(55, 65, 81, 0.7);
    }
</style>
@endif