<script lang="ts">
import { m } from '$lib/paraglide/messages.js';

type FlatTag = {
	id: string;
	name: string;
	color?: string;
	parentId?: string;
	documentCount: number;
};

interface Props {
	tag: { name: string; parentId?: string };
	allTags: FlatTag[];
}

let { tag, allTags }: Props = $props();

const ancestors = $derived.by(() => {
	const chain: FlatTag[] = [];
	let current: FlatTag | undefined = allTags.find((t) => t.id === tag.parentId);
	while (current) {
		chain.push(current);
		const parentId = current.parentId;
		current = parentId ? allTags.find((t) => t.id === parentId) : undefined;
	}
	return chain.reverse();
});
</script>

{#if ancestors.length > 0}
	<nav aria-label={m.admin_tag_ancestry_label()}>
		<ol class="flex items-center gap-1 text-xs text-ink-3">
			{#each ancestors as ancestor (ancestor.id)}
				<li>
					<a href="/admin/tags/{ancestor.id}" class="hover:text-ink">{ancestor.name}</a>
				</li>
				<li aria-hidden="true">›</li>
			{/each}
			<li class="text-ink">{tag.name}</li>
		</ol>
	</nav>
{/if}
