<template>
    <nav v-if="links && links.length > 3" class="flex items-center justify-between">
        <p class="text-sm text-surface-500">
            Showing <span class="font-medium">{{ from }}</span> to <span class="font-medium">{{ to }}</span> of <span class="font-medium">{{ total }}</span> results
        </p>
        <div class="flex items-center gap-1">
            <template v-for="(link, i) in links" :key="i">
                <Link
                    v-if="link.url"
                    :href="link.url"
                    :class="[
                        'px-3 py-2 rounded-lg text-sm font-medium transition-colors',
                        link.active
                            ? 'bg-primary-600 text-white'
                            : 'text-surface-600 hover:bg-surface-100'
                    ]"
                    v-html="link.label"
                    preserve-scroll
                />
                <span v-else :class="[
                    'px-3 py-2 rounded-lg text-sm font-medium',
                    link.active ? 'bg-primary-600 text-white' : 'text-surface-300'
                ]" v-html="link.label" />
            </template>
        </div>
    </nav>
</template>

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

defineProps({
    links: Array,
    from: Number,
    to: Number,
    total: Number,
});
</script>
