@props([
    'headers' => [],
    'rows' => [],
    'actions' => false,
    'searchable' => false,
    'paginated' => false,
])

<div class="overflow-hidden shadow-sm sm:rounded-lg">
    <!-- Search Bar -->
    @if($searchable)
    <div class="flex flex-col md:flex-row md:items-center md:justify-between bg-white dark:bg-gray-800 px-4 py-3 border-b border-gray-100 dark:border-gray-700">
        <div class="flex-1 mb-3 md:mb-0 md:ml-3">
            <div class="relative">
                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                    <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                    </svg>
                </div>
                <input type="text" id="search" class="bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 pr-10 py-2" placeholder="بحث..." />
            </div>
        </div>
        
        {{ $filters ?? '' }}
    </div>
    @endif

    <!-- Table -->
    <div class="overflow-x-auto">
        <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 $header)
                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                        {{ $header }}
                    </th>
                    @endforeach
                    
                    @if($actions)
                    <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                        الإجراءات
                    </th>
                    @endif
                </tr>
            </thead>
            
            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                <!-- No data available state -->
                @if(count($rows) === 0)
                <tr>
                    <td colspan="{{ count($headers) + ($actions ? 1 : 0) }}" class="px-6 py-10 text-center">
                        <div class="flex flex-col items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-400 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                            </svg>
                            <p class="text-gray-500 dark:text-gray-400 font-medium">لا توجد بيانات متاحة</p>
                        </div>
                    </td>
                </tr>
                @else
                    {{ $slot }}
                @endif
            </tbody>
        </table>
    </div>
    
    <!-- Pagination -->
    @if($paginated)
    <div class="bg-white dark:bg-gray-800 px-4 py-3 border-t border-gray-200 dark:border-gray-700 sm:px-6">
        <div class="flex flex-col md:flex-row items-center justify-between">
            <div class="flex-1 flex justify-between items-center mb-3 md:mb-0">
                {{ $pagination ?? '' }}
            </div>
            <div class="flex-shrink-0">
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    {{ $paginationDetails ?? 'عرض 1 - 10 من أصل 100 سجل' }}
                </p>
            </div>
        </div>
    </div>
    @endif
</div>