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

import { useAppParams } from "~/composables/global/useAppParams";
import { useRatio } from "~/composables/global/useRatio";

// types

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

// props

defineProps<Props>();

// state

const { page } = useAppParams();

const { isMobile } = useRatio();
</script>

<template>
    <PaginationRoot
        :total="total"
        :sibling-count="isMobile ? 0 : 1"
        :items-per-page="perPage"
        show-edges
        v-model:page="page"
        class="max-w-full"
    >
        <PaginationList
            v-slot="{ items }"
            class="flex items-center gap-2"
        >
            <PaginationFirst
                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
            >
                <Icon
                    name="ci:bi-chevron-double-right"
                    class="**:fill-back"
                    size="18px"
                />
            </PaginationFirst>

            <PaginationPrev
                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
            >
                <Icon
                    name="ci:bi-chevron-right"
                    class="**:fill-back"
                    size="18px"
                />
            </PaginationPrev>

            <template v-for="(page, index) in items">
                <PaginationListItem
                    v-if="page.type === 'page'"
                    :key="index"
                    class="w-9 h-9 shrink-0 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>

            <PaginationNext
                class="w-9 h-9 flex items-center justify-center cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
            >
                <Icon
                    name="ci:bi-chevron-left"
                    class="**:fill-back"
                    size="18px"
                />
            </PaginationNext>

            <PaginationLast
                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-slate-100 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
            >
                <Icon
                    name="ci:bi-chevron-double-left"
                    class="**:fill-back"
                    size="18px"
                />
            </PaginationLast>
        </PaginationList>
    </PaginationRoot>
</template>
