@props([
    'headers' => [],
    'rows' => [],
    'emptyMessage' => 'No data found.',
    'mobileCardClass' => 'bg-white rounded-lg shadow p-4 mb-4',
    'tableClass' => 'min-w-full divide-y divide-gray-200'
])

<div class="overflow-x-auto">
    <!-- Desktop Table (hidden on mobile) -->
    <table class="{{ $tableClass }} hidden md:table">
        <thead class="bg-gray-50">
            <tr>
                @foreach($headers as $header)
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        {{ $header }}
                    </th>
                @endforeach
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
            @forelse($rows as $row)
                <tr class="hover:bg-gray-50">
                    @foreach($row as $index => $cell)
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            {!! $cell !!}
                        </td>
                    @endforeach
                </tr>
            @empty
                <tr>
                    <td colspan="{{ count($headers) }}" class="px-6 py-4 text-center text-gray-500">
                        {{ $emptyMessage }}
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>

    <!-- Mobile Cards (visible only on mobile) -->
    <div class="md:hidden space-y-4">
        @forelse($rows as $rowIndex => $row)
            <div class="{{ $mobileCardClass }}">
                @foreach($row as $index => $cell)
                    <div class="flex justify-between items-start py-2 {{ $index > 0 ? 'border-t border-gray-100' : '' }}">
                        <div class="text-sm font-medium text-gray-500 min-w-0 flex-1">
                            {{ $headers[$index] ?? 'Field ' . ($index + 1) }}
                        </div>
                        <div class="text-sm text-gray-900 text-right min-w-0 flex-1 ml-4">
                            {!! $cell !!}
                        </div>
                    </div>
                @endforeach
            </div>
        @empty
            <div class="text-center text-gray-500 py-8">
                {{ $emptyMessage }}
            </div>
        @endforelse
    </div>
</div>