<script lang="ts">
  import * as Select from '$lib/components/ui/select'
  import type { TableHandler } from '@vincjo/datatables'

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

  const options = [10, 20, 50, 100]
  let value = $state('20')

  function handleChange(newValue: string | undefined) {
    if (!newValue) return
    value = newValue
    table.setRowsPerPage(parseInt(newValue))
  }
</script>

<Select.Root type="single" {value} onValueChange={handleChange}>
  <Select.Trigger size="sm" class={className}>
    {value}
  </Select.Trigger>
  <Select.Content>
    {#each options as n}
      <Select.Item value={String(n)}>{n} / page</Select.Item>
    {/each}
  </Select.Content>
</Select.Root>
