<template>
  <div class="text-center">
    <div class="flex flex-col gap-4">
      <Example label="rounded">
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       rounded
        >
        </AisPagination>
      </Example>
      <Example label="rounded-md">
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       :rounded="'md'"
        >
        </AisPagination>
      </Example>
      <Example label="rounded-lg">
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       :rounded="'lg'"
        >
        </AisPagination>
      </Example>
      <Example label="rounded-full">
        <AisPagination v-model="page"
                       :total-rows="100"
                       :per-page="10"
                       :size="'sm'"
                       :rounded="'full'"
        >
        </AisPagination>
      </Example>
    </div>


    <div class="mt-3">Selected Page = [{{ page }}]</div>
  </div>
</template>

<script setup>
    import {ref} from 'vue';
    import AisPagination from '@/components/pagination/AisPagination.vue'
    import Example from "@/components/docs/ComponentExample.vue";

    const page = ref(5)
</script>
