<script setup lang="ts">
// types

type Props = {
    total: number;
    items: {
        type: string;
        value: number;
    }[];
};

// props

defineProps<Props>();

// state

const params: any = inject("params");

// computed

const page = computed({
    get: () => (params?.page ? Number(params.page) : 1),
    set: (value: number) => (params.page = value),
});
</script>

<template>
    <PaginationRoot
        :total="total"
        :sibling-count="1"
        :items-per-page="9"
        show-edges
        v-model:page="page"
    >
        <PaginationList v-slot="{ items }" class="flex items-center gap-2">
            <PaginationLast
                class="px-2 h-9 font-light whitespace-nowrap flex items-center justify-center bg-transparent cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
            >
                برو آخر
            </PaginationLast>
            <PaginationNext
                class="w-9 h-9 ml-4 flex items-center justify-center cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
            >
                <Icon
                    name="ci:chevron-right"
                    class="**:fill-back"
                    size="18px"
                />
            </PaginationNext>

            <template v-for="(page, index) in items">
                <PaginationListItem
                    v-if="page.type === 'page'"
                    :key="index"
                    class="w-9 h-9 cursor-pointer bg-slate-100 rounded-lg data-[selected]:!bg-black data-[selected]:text-white data-[selected]:shadow-sm hover:bg-slate-200 transition"
                    :value="page.value"
                >
                    {{ page.value }}
                </PaginationListItem>
                <PaginationEllipsis
                    v-else
                    :key="page.type"
                    :index="index"
                    class="w-9 h-9 select-none flex items-center justify-center"
                >
                    &#8230;
                </PaginationEllipsis>
            </template>

            <PaginationPrev
                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition mr-4 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
            >
                <Icon name="ci:chevron-left" class="**:fill-back" size="18px" />
            </PaginationPrev>
            <PaginationFirst
                class="px-2 h-9 font-light flex items-center whitespace-nowrap justify-center bg-transparent cursor-pointer transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
            >
                برو اول
            </PaginationFirst>
        </PaginationList>
    </PaginationRoot>
</template>
