<script lang="ts">
  import SearchInput from './SearchInput.svelte'
  import RowsPerPage from './pagination/RowsPerPage.svelte'
  import type { TableHandler } from '@vincjo/datatables'

  let {
    table,
    searchable = false,
    paginated = false,
    onSearchChange,
    children
  }: {
    table: TableHandler<Record<string, unknown>>
    searchable?: boolean
    paginated?: boolean
    onSearchChange?: (q: string) => void
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    children?: any
  } = $props()
</script>

{#if searchable || paginated || children}
  <div class="flex items-center gap-2 px-1 py-2">
    {#if searchable}
      <SearchInput placeholder="Search..." onSearch={onSearchChange} class="w-64" />
    {/if}
    <div class="flex-1"></div>
    {@render children?.()}
    {#if paginated}
      <RowsPerPage {table} />
    {/if}
  </div>
{/if}
