@props([
  'searchable' => true,
  'sortable' => true,
  'paginate' => true,
])

<div class="card" x-data="table()">
  @if ($searchable)
    <div class="card-header border-b-0">
      <div class="flex items-center space-x-4">
        <div class="flex-1 relative">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
          </div>
          <input
            x-model="search"
            type="text"
            class="form-input pl-10"
            placeholder="Search..."
          >
        </div>
      </div>
    </div>
  @endif

  <div class="overflow-x-auto">
    <table class="table-base w-full">
      {{ $slot }}
    </table>
  </div>

  @if ($paginate)
    <div class="card-footer flex items-center justify-between">
      <p class="text-sm text-slate-600">Showing 1 to 10 of 100 results</p>
      <div class="flex items-center space-x-2">
        <button class="px-3 py-2 border border-slate-300 rounded-lg text-sm hover:bg-slate-50 disabled:opacity-50">Previous</button>
        <div class="flex items-center space-x-1">
          <button class="px-3 py-2 rounded-lg text-sm bg-primary-600 text-white">1</button>
          <button class="px-3 py-2 rounded-lg text-sm border border-slate-300 hover:bg-slate-50">2</button>
          <button class="px-3 py-2 rounded-lg text-sm border border-slate-300 hover:bg-slate-50">3</button>
        </div>
        <button class="px-3 py-2 border border-slate-300 rounded-lg text-sm hover:bg-slate-50">Next</button>
      </div>
    </div>
  @endif
</div>