<script setup>
import { Link } from '@inertiajs/vue3'

defineProps({
    links: { type: Array, required: true },
    meta: { type: Object, default: null },
})
</script>

<template>
    <div v-if="links.length > 3" class="flex flex-wrap items-center justify-between gap-4 mt-6">
        <p v-if="meta" class="text-sm text-gray-600">
            Affichage de {{ meta.from }} à {{ meta.to }} sur {{ meta.total }} résultats
        </p>
        <div class="flex gap-1">
            <template v-for="link in links" :key="link.label">
                <Link v-if="link.url" :href="link.url" preserve-scroll
                    :class="['px-3 py-1.5 text-sm rounded-md border transition-colors',
                        link.active
                            ? 'bg-blue-600 border-blue-600 text-white'
                            : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50']"
                    v-html="link.label" />
                <span v-else :class="['px-3 py-1.5 text-sm rounded-md border bg-white border-gray-200 text-gray-400 cursor-not-allowed']"
                    v-html="link.label" />
            </template>
        </div>
    </div>
</template>
