<script lang="ts">
	import { ChevronLeft, ChevronRight } from "radix-svelte-icons";
	
    export let pages: number;
		export let current: number
		export let next: string;
		export let prev: string;

</script>

	<div class='flex items-center justify-center gap-2 my-4'>
			<a href={prev}
					class:disabled={current === 1 ? true : false} 
					aria-label="left arrow icon" 
					aria-describedby="prev"
					class="flex p-2 hover:bg-gray-200 rounded-lg">
<ChevronLeft></ChevronLeft>
			</a>
			<p>{current} of {pages}</p>
			<a href={next} 
			class:disabled={current === pages ? true : false} 
					aria-label="right arrow icon" 
					aria-describedby="next"
					class="flex p-2 hover:bg-gray-200 rounded-lg">
					<ChevronRight></ChevronRight>
			</a>
	</div>

	<style>
		.disabled {
			@apply pointer-events-none cursor-default text-gray-500;
		}
	</style>