<script lang="ts">
	import { resolve } from "$app/paths";
	import Tag from "$lib/components/ui/Tag.svelte";
	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
	import type { TagSummary } from "./types";

	interface Props {
		ownerHandle: string;
		repoName: string;
		tags: TagSummary[];
	}

	let { ownerHandle, repoName, tags }: Props = $props();

	const base = $derived(`/${ownerHandle}/${repoName}`);
</script>

<div class="flex flex-col gap-1">
	{#each tags as tag, index (tag.name)}
		<div>
			<div class="flex items-center gap-2 text-base">
				<a
					href={resolve(`${base}/tags/${encodeURIComponent(tag.name)}` as "/")}
					class="truncate text-foreground-default no-underline hover:underline"
				>
					{tag.name}
				</a>
			</div>
			<div class="flex items-center gap-2">
				{#if tag.when}
					<TimeAgo value={tag.when} class="text-xs text-foreground-subtle" />
				{/if}
				{#if index === 0}
					<Tag color="gray" class="font-mono">Latest</Tag>
				{/if}
			</div>
		</div>
	{/each}
</div>
