I have a pagination component that receives `totalPages` and `currentPage` props and then renders buttons that change the `currentPage`. The problem is that right now if I have many products, I render too many buttons and I want to limit the amount of buttons to 5 - the two previous pages, current page and the next two pages.

So if my current page is `4`, I'd see buttons for pages `2, 3, 4, 5, 6` and have the current page always be the middle button ( except when that's not possible ). I'm not quite sure how to handle that though, especially the corner cases when the `currentPage` is either first/second or second-to-last/last.

```
<template lang="html">
    <div class="pagination">
        <div v-for="page in totalPages">
            <div class="page" :class="{ active: page == currentPage}"  @click="setCurrentPage(page)">{{ page }}</div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["totalPages", "currentPage"],
    methods: {
        setCurrentPage(page){
            this.$emit("setCurrentPage", page);
        }
    }
}
</script>

```