<script lang="ts">
import { Pagination } from "carbon-components-svelte";

export let page = 1;
export let totalItems = 0;
export let disabled = false;
export let forwardText = "Next page";
export let backwardText = "Previous page";
export let itemsPerPageText = "Items per page:";
export let pageInputDisabled = false;
export let pageSizeInputDisabled = false;
export let pageSize = 10;
export let pageSizes: ReadonlyArray<number> = [10];
export let pagesUnknown = false;
</script>

<Pagination
  bind:page
  {totalItems}
  {disabled}
  {forwardText}
  {backwardText}
  {itemsPerPageText}
  {pageInputDisabled}
  {pageSizeInputDisabled}
  bind:pageSize
  {pageSizes}
  {pagesUnknown}
  on:change={(e) => {
    console.log("change", e.detail);
  }}
  on:click:button--previous={(e) => {
    console.log("previous", e.detail);
  }}
  on:click:button--next={(e) => {
    console.log("next", e.detail);
  }}
  on:update={(e) => {
    console.log("update", e.detail);
  }}
/>
