<template>
    <div
        v-if="links.length > 3"
        class="flex flex-wrap items-center justify-between w-full gap-3 mt-8"
    >
        <span class="text-xs font-medium text-gray-200">
            Showing {{ `${paginator.from} - ${paginator.to}` }} of
            {{ paginator.total }} results
        </span>
        <div class="flex justify-end gap-2.5">
            <template v-for="(link, key) in links" :key="key">
                <span
                    v-if="key == 1 || key == links.length - 1"
                    class="h-5 border-l border-gray-200"
                ></span>
                <template
                    v-if="key == 0 || key == links.length - 1 || link.active"
                >
                    <div
                        v-if="link.url === null || link.active"
                        class="px-2.5 py-1 text-sm rounded-lg text-gray-200 cursor-not-allowed select-none"
                        :class="{
                            'bg-blue-300 !text-white': link.active,
                        }"
                        v-html="link.label"
                    />

                    <Link
                        v-else
                        class="px-2.5 py-1 text-sm rounded-lg text-gray-200"
                        :href="link.url"
                        v-html="link.label"
                    />

                    <span
                        v-if="link.active"
                        class="py-1 mt-0 text-sm text-gray-200 rounded-lg"
                        >out of {{ paginator.last_page }}</span
                    >
                </template>
            </template>
        </div>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { Link } from "@inertiajs/inertia-vue3";
export default defineComponent({
    components: {
        Link,
    },
    props: {
        paginator: Array,
    },
    computed: {
        links() {
            return this.paginator.links;
        },
    },
    mounted() {},
});
</script>
