@props([
    'columns'      => [],
    'rows'         => [],
    'sortBy'       => '',
    'sortDir'      => 'asc',
    'emptyMessage' => 'No records found.',
])

@php
    $wrap = 'overflow-x-auto rounded-xl border border-border';
    $table = 'w-full text-left text-sm text-muted-foreground';
    $thead = 'bg-brand text-xs font-semibold uppercase tracking-wider text-brand-foreground';
    $th = 'px-6 py-4';
    $tr = 'border-t border-border bg-card transition-colors duration-150 hover:bg-muted/60 dark:hover:bg-muted/40';
    $td = 'px-6 py-4 text-foreground';
@endphp

<div class="{{ $wrap }}">
    <table class="{{ $table }}">
        <thead class="{{ $thead }}">
            <tr>
                <th class="{{ $th }} w-10 px-4 py-3">
                    <input type="checkbox" id="select-all"
                           class="h-4 w-4 rounded border-input text-primary-600 focus:ring-primary-500"
                           x-data
                           @change="document.querySelectorAll('.row-checkbox').forEach(c => c.checked = $event.target.checked)"
                    />
                </th>

                @foreach($columns as $col)
                    <th class="{{ $th }} {{ $col['class'] ?? '' }}">
                        @if($col['sortable'] ?? false)
                            <a
                                href="{{ request()->fullUrlWithQuery([
                                    'sort'  => $col['key'],
                                    'dir'   => ($sortBy === $col['key'] && $sortDir === 'asc') ? 'desc' : 'asc',
                                    'page'  => 1,
                                ]) }}"
                                class="group inline-flex items-center gap-1.5 transition-colors hover:text-primary-600 dark:hover:text-primary-400"
                            >
                                {{ $col['label'] }}
                                <span class="flex flex-col gap-0.5">
                                    <svg class="w-2.5 h-2.5 {{ $sortBy === $col['key'] && $sortDir === 'asc' ? 'text-primary-500' : 'text-muted-foreground group-hover:text-muted-foreground/80' }}"
                                         viewBox="0 0 10 6" fill="currentColor" aria-hidden="true">
                                        <path d="M0 6l5-6 5 6z"/>
                                    </svg>
                                    <svg class="w-2.5 h-2.5 {{ $sortBy === $col['key'] && $sortDir === 'desc' ? 'text-primary-500' : 'text-muted-foreground group-hover:text-muted-foreground/80' }}"
                                         viewBox="0 0 10 6" fill="currentColor" aria-hidden="true">
                                        <path d="M0 0l5 6 5-6z"/>
                                    </svg>
                                </span>
                            </a>
                        @else
                            {{ $col['label'] }}
                        @endif
                    </th>
                @endforeach

                @if(isset($actions))
                    <th class="{{ $th }} text-right">Actions</th>
                @endif
            </tr>
        </thead>
        <tbody>
            @forelse($rows as $row)
                <tr class="{{ $tr }}">
                    <td class="px-4 py-3">
                        <input type="checkbox" name="selected[]" value="{{ $row->id ?? '' }}"
                               class="row-checkbox h-4 w-4 rounded border-input text-primary-600 focus:ring-primary-500"/>
                    </td>
                    @foreach($columns as $col)
                        <td class="{{ $td }} {{ $col['class'] ?? '' }}">
                            {{ data_get($row, $col['key']) }}
                        </td>
                    @endforeach
                    @if(isset($actions))
                        <td class="px-4 py-3 text-right">
                            {{ $actions }}
                        </td>
                    @endif
                </tr>
            @empty
                <tr>
                    <td colspan="{{ count($columns) + (isset($actions) ? 2 : 1) }}">
                        <x-tables.empty-state :message="$emptyMessage" />
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>