<script lang="ts">
  import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left'
  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right'
  import PageButton from './PageButton.svelte'
  import type { TableHandler } from '@vincjo/datatables'

  let { table }: { table: TableHandler<Record<string, unknown>> } = $props()

  const pages = $derived(table.pagesWithEllipsis as (number | '...')[])
  const currentPage = $derived(table.currentPage)
  const pageCount = $derived(table.pageCount)
  const rowCount = $derived(table.rowCount)
</script>

{#if pageCount > 1}
  <div class="flex items-center justify-between gap-2 px-2 py-1.5">
    <span class="text-xs text-muted-foreground">{rowCount} rows</span>
    <div class="flex items-center gap-1">
      <PageButton
        page={ChevronLeftIcon}
        disabled={currentPage === 1}
        onclick={() => table.setPage('previous')}
      />
      {#each pages as page}
        {#if page === '...'}
          <span class="px-1 text-xs text-muted-foreground">…</span>
        {:else}
          <PageButton
            {page}
            active={page === currentPage}
            onclick={() => table.setPage(page as number)}
          />
        {/if}
      {/each}
      <PageButton
        page={ChevronRightIcon}
        disabled={currentPage === pageCount}
        onclick={() => table.setPage('next')}
      />
    </div>
  </div>
{/if}
