<script lang="ts">
	import { resolve } from "$app/paths";
	import ChevronLeft from "$icon/chevron-left";
	import ChevronRight from "$icon/chevron-right";
	import TagCard from "$lib/components/repo/TagCard.svelte";
	import Button from "$lib/components/ui/Button.svelte";
	import TabPanel from "$lib/components/ui/TabPanel.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}/tags${next > 1 ? `?page=${next}` : ""}` as "/"
		);
</script>

<TabPanel>
	<h2 class="mb-4 typography-paragraph-regular font-bold">Tags</h2>
	<div class="flex flex-col gap-12 py-2 md:gap-0">
		{#each data.tags as tag (tag.name)}
			<TagCard ownerHandle={data.repo.ownerHandle} repoName={data.repo.name} {tag} />
		{:else}
			<p class="p-4 text-center text-foreground-subtle">
				This repository does not contain any tags.
			</p>
		{/each}
	</div>
</TabPanel>

{#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}
