<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
import { Button } from '@/components/ui/button';
import type { DataTablePagination, DataTablePaginationLink } from '@/types/data-table';

defineProps<{
    summary: string | null;
    pagination?: DataTablePagination;
    paginationLinks?: DataTablePaginationLink[];
}>();
</script>

<template>
    <div v-if="pagination" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <p v-if="summary" class="text-muted-foreground text-sm">
            {{ summary }}
        </p>

        <div
            v-if="paginationLinks?.length && pagination.lastPage > 1"
            class="flex flex-wrap items-center justify-center gap-1 sm:justify-end"
        >
            <Button
                v-for="link in paginationLinks"
                :key="`${link.label}-${link.url}`"
                variant="outline"
                size="sm"
                :disabled="!link.url || link.active"
                as-child
            >
                <Link v-if="link.url" :href="link.url" preserve-scroll>
                    <span v-html="link.label" />
                </Link>
                <span v-else v-html="link.label" />
            </Button>
        </div>
    </div>
</template>
