<template>
    <div class="pagination">
        <div class="pagination">
            <button @click="go(prev_page)" :disabled="!prev_page">&lt;</button>

            <button v-for="n in pageNumbers" :key="n" @click="go(n)" :class="{ active: n === current }">
                {{ n }}
            </button>

            <button @click="go(next_page)" :disabled="!next_page">&gt;</button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ThreadsPagination',
    props: {
        current: { type: Number, required: true },
        last: { type: Number, required: true }
    },
    computed: {
        prev_page() {
            return this.current > 1 ? this.current - 1 : null
        },
        next_page() {
            return this.current < this.last ? this.current + 1 : null
        },
        pageNumbers() {
            const pages = []
            const total = this.last
            const current = this.current
            const delta = 2

            if (total <= 1) return [1]

            // Always show first page
            pages.push(1)

            // Pages around current
            for (let i = current - delta; i <= current + delta; i++) {
                if (i > 1 && i < total) pages.push(i)
            }

            // Always show last page
            if (total > 1) pages.push(total)

            // Remove duplicates and sort
            return [...new Set(pages)].sort((a, b) => a - b)
        }
    },
    methods: {
        go(page) {
            if (!page || page === this.current) return
            this.$emit('page-changed', page)
        }
    }
}
</script>

<style scoped>
.pagination {
    display: flex;
    justify-content: center;
    margin: 0.25rem;
    gap: 4px;
}


.pagination button {
    min-width: 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 0.2rem;
 }

.pagination button.active {
    background-color: #007bff;
    /* blue */
    color: white;
    border-color: #007bff;
}
</style>
