<script setup>

import {ref} from "vue"

const props = defineProps(["v-max"])

const emits = defineEmits(["change"])

const {max, page} = (function () {
	let max = props.vMax
	if (max == null) {
		max = 0
	}
	return {
		max: ref(max),
		page: ref(1)
	}
})()

const updateMax = function (maxValue) {
	max.value = maxValue
}

const selectPage = function (pageValue) {
	page.value = pageValue
	emits("change", page.value)
}

defineExpose({
	updateMax,
	selectPage
})

</script>

<template>
	<div>
		<div class="flex flex-wrap gap-2 items-center my-2" v-if="max > 1">
			<a href="" v-for="i in max" :class="{active: i == page}" @click.prevent="selectPage(i)">{{ i }}</a>
		</div>
	</div>
</template>

<style scoped>
a:not(.active) {
	color: var(--p-text-color) !important;
}
</style>
