<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: { id: string };
	allTags: FlatTag[];
}

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

let showAll = $state(false);

const children = $derived(allTags.filter((t) => t.parentId === tag.id));
const visibleChildren = $derived(showAll ? children : children.slice(0, 5));
</script>

{#if children.length > 0}
	<div
		data-testid="children-preview"
		class="mb-5 rounded-sm border border-line bg-surface p-5 shadow-sm"
	>
		<h3 class="mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">
			{m.admin_tag_children_label()}
		</h3>
		<div class="flex flex-wrap gap-2">
			{#each visibleChildren as child (child.id)}
				<a
					href="/admin/tags/{child.id}"
					class="rounded-full border border-line bg-surface px-3 py-1 text-xs text-ink hover:bg-accent-bg"
					>{child.name}</a
				>
			{/each}
			{#if !showAll && children.length > 5}
				<button
					type="button"
					data-testid="expand-children"
					onclick={() => showAll = true}
					class="rounded-full border border-line bg-surface px-3 py-1 text-xs text-ink-3 hover:text-ink"
					>{m.admin_tag_children_more({ count: children.length - 5 })}</button
				>
			{/if}
		</div>
	</div>
{/if}
