
<script setup>
import { computed } from 'vue'

const props = defineProps({
    links: Array
})

defineEmits(['changePage'])

const pageNumbers = computed(() => props.links.slice(1, -1));
</script>


<template>
    <div class="mt-6">
        <nav class="flex items-center justify-center px-4 sm:px-0">
            <div class="hidden md:-mt-px md:flex">
                <button v-for="link in pageNumbers" @click.prevent="$emit('changePage', parseInt(link.label))" class="flex items-center justify-center w-10 h-10 rounded text-sm font-medium text-primary-500 hover:text-primary-400" :class="{ 'bg-sky-500 text-white hover:text-white hover:text-opacity-75': link.active }">
                    {{ link.label }}
                </button>
            </div>
        </nav>
    </div>
</template>
