@props([
    'items' => [],
    'columns' => [],
    'sortKey' => null,
    'sortDir' => 'asc',
    'baseRoute' => null,
    'bulkActions' => [],
])

<div class="data-table-wrapper">
    {{-- Desktop: table --}}
    <div class="data-table-desktop overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead>
                <tr>
                    @if(!empty($bulkActions))
                        <th class="px-4 py-2"><input type="checkbox" class="bulk-select-all" aria-label="Select all"></th>
                    @endif
                    @foreach($columns as $key => $label)
                        <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">
                            @if($baseRoute && $sortKey !== $key)
                                <a href="{{ request()->fullUrlWithQuery(['sort' => $key, 'dir' => 'asc']) }}">{{ $label }}</a>
                            @else
                                {{ $label }}
                                @if($sortKey === $key)
                                    <span>{{ $sortDir === 'asc' ? '↑' : '↓' }}</span>
                                @endif
                            @endif
                        </th>
                    @endforeach
                    <th class="px-4 py-2"></th>
                </tr>
            </thead>
            <tbody>
                @foreach($items as $item)
                    <tr class="data-table-row hover:bg-gray-50">
                        @if(!empty($bulkActions))
                            <td class="px-4 py-2"><input type="checkbox" class="bulk-select" value="{{ $item->id ?? $item['id'] }}"></td>
                        @endif
                        @foreach($columns as $key => $label)
                            <td class="px-4 py-2 text-sm" data-label="{{ $label }}">
                                {{ $item->{$key} ?? $item[$key] ?? '—' }}
                            </td>
                        @endforeach
                        <td class="px-4 py-2">
                            @if($baseRoute && isset($item->id))
                                <a href="{{ route($baseRoute.'.edit', $item) }}">Edit</a>
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- Mobile: cards (collapse rows) --}}
    <div class="data-table-mobile hidden">
        @foreach($items as $item)
            <div class="border rounded-lg p-4 mb-3 shadow-sm">
                @foreach($columns as $key => $label)
                    <div class="flex justify-between py-1 text-sm">
                        <span class="font-medium text-gray-600">{{ $label }}</span>
                        <span>{{ $item->{$key} ?? $item[$key] ?? '—' }}</span>
                    </div>
                @endforeach
                @if($baseRoute && isset($item->id))
                    <a href="{{ route($baseRoute.'.edit', $item) }}" class="text-sm text-blue-600 mt-2 inline-block">Edit</a>
                @endif
            </div>
        @endforeach
    </div>
</div>

@push('styles')
<style>
@media (max-width: 768px) {
    .data-table-desktop { display: none !important; }
    .data-table-mobile { display: block !important; }
}
</style>
@endpush