<script lang="ts">
	import { resolve } from "$app/paths";
	import GitCompare from "$icon/git-compare";
	import Button from "$lib/components/ui/Button.svelte";
	import Tag from "$lib/components/ui/Tag.svelte";
	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
	import type { BranchSummary } from "./types";

	interface Props {
		ownerHandle: string;
		repoName: string;
		currentRef: string;
		branches: BranchSummary[];
	}

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

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

<div class="flex flex-col gap-1">
	{#each branches as branch (branch.name)}
		<div class="flex items-center justify-between overflow-hidden typography-paragraph-large">
			<div class="flex min-w-0 flex-1 items-center gap-2">
				<a
					href={resolve(`${base}/tree/${encodeURIComponent(branch.name)}` as "/")}
					class="truncate text-foreground-default no-underline hover:underline"
				>
					{branch.name}
				</a>
				{#if branch.when}
					<span aria-hidden="true" class="shrink-0 text-foreground-subtle select-none"
						>&middot;</span
					>
					<TimeAgo
						value={branch.when}
						class="shrink-0 typography-paragraph-regular whitespace-nowrap text-foreground-subtle"
					/>
				{/if}
				{#if branch.isDefault}
					<Tag color="gray" class="shrink-0 font-mono">Default</Tag>
				{/if}
			</div>
			{#if branch.name !== currentRef}
				<Button
					variant="ghost"
					size="sm"
					icon={GitCompare}
					href={resolve(
						`${base}/compare/${encodeURIComponent(currentRef)}...${encodeURIComponent(branch.name)}` as "/"
					)}
					class="ml-2 shrink-0"
					title="Compare branches or tags"
				>
					Compare
				</Button>
			{/if}
		</div>
	{/each}
</div>
