<script lang="ts">
	import { resolve } from "$app/paths";

	interface Props {
		ownerHandle: string;
		repoName: string;
		ref: string;
		class?: string;
	}

	let { ownerHandle, repoName, ref, class: className = "" }: Props = $props();

	const treeHref = $derived(
		resolve(`/${ownerHandle}/${repoName}/tree/${encodeURIComponent(ref)}` as "/")
	);
</script>

<div
	class="flex w-fit items-center justify-center gap-2 rounded-sm border border-border-default bg-background-canvas px-2 py-1 whitespace-nowrap {className}"
>
	<span class="text-foreground-muted">at</span>
	<a href={treeHref} class="text-foreground-default no-underline hover:underline">{ref}</a>
</div>
