<script setup lang="ts">
import APagination from '#adata-ui/components/elements/pagination/APagination.vue'

const initState = () => ({
  lastPage: 100,
  disabled: false,
  amountOfShownPages: 5,
  activeClasses: '',
  defaultClasses: ''
})

const currentPage = ref<number>(1)
</script>

<template>
  <Story
    title="Elements/Pagination"
    :layout="{
      type: 'grid',
      width: 500
    }"
  >
    <Variant title="APagination" :init-state="initState">
      <template #default="{ state }">
        <div class="flex items-center">
          <a-pagination
            v-model="currentPage"
            :last-page="state.lastPage"
            :disabled="state.disabled"
            :amount-of-shown-pages="state.amountOfShownPages"
          />
        </div>
      </template>

      <template #controls="{ state }">
        <HstCheckbox v-model="state.disabled" title="Disabled" />
        <HstText v-model="state.activeClasses" title="Active classes" />
        <HstText v-model="state.defaultClasses" title="Default classes" />
      </template>
    </Variant>
  </Story>
</template>

<style scoped></style>
