<script lang="ts">
	import { resolve } from "$app/paths";
	import ChevronLeft from "$icon/chevron-left";
	import ChevronRight from "$icon/chevron-right";
	import BranchTable from "$lib/components/repo/BranchTable.svelte";
	import Button from "$lib/components/ui/Button.svelte";

	let { data } = $props();

	const hasPrev = $derived(data.page > 1);
	const hasNext = $derived(data.page < data.pageCount);
	const pageHref = (next: number) =>
		resolve(
			`/${data.repo.ownerHandle}/${data.repo.name}/branches${next > 1 ? `?page=${next}` : ""}` as "/"
		);
</script>

<BranchTable
	ownerHandle={data.repo.ownerHandle}
	repoName={data.repo.name}
	branches={data.branches}
/>

{#if hasPrev || hasNext}
	<div class="mt-4 flex justify-end gap-2">
		{#if hasPrev}
			<Button href={pageHref(data.page - 1)} icon={ChevronLeft} size="sm">Previous</Button>
		{/if}
		{#if hasNext}
			<Button href={pageHref(data.page + 1)} icon={ChevronRight} iconSide="right" size="sm">Next</Button>
		{/if}
	</div>
{/if}
