<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
import { Button } from '@/components/ui/button';

interface PaginatorLink {
    url: string | null;
    label: string;
    active: boolean;
}

defineProps<{
    links: PaginatorLink[];
    from?: number;
    to?: number;
    total?: number;
}>();
</script>

<template>
    <div v-if="links.length > 3" class="flex items-center justify-between gap-4 px-2">
        <div class="text-sm text-muted-foreground">
            <span v-if="total !== undefined">Menampilkan {{ from }}–{{ to }} dari {{ total }} data</span>
        </div>
        <div class="flex items-center gap-1">
            <template v-for="(link, i) in links" :key="i">
                <Button
                    v-if="link.url"
                    variant="ghost"
                    size="sm"
                    :class="{ 'bg-muted font-medium': link.active }"
                    as-child
                >
                    <Link :href="link.url" v-html="link.label" />
                </Button>
                <span v-else class="px-2 text-sm text-muted-foreground" v-html="link.label" />
            </template>
        </div>
    </div>
</template>
