<script lang="ts">
type Tag = { id: string; name: string };

let { tags, max = 3 }: { tags: Tag[]; max?: number } = $props();

const displayedTags = $derived(tags.slice(0, max));
const hiddenTagCount = $derived(Math.max(0, tags.length - max));
</script>

{#if tags.length > 0}
	<div class="flex flex-wrap items-center gap-1 pt-0.5">
		{#each displayedTags as tag (tag.id)}
			<span
				data-testid="thumb-row-tag"
				class="max-w-[140px] truncate rounded-full border border-line bg-surface px-2 py-0.5 text-sm text-ink-2"
				>{tag.name}</span
			>
		{/each}
		{#if hiddenTagCount > 0}
			<span class="text-sm font-bold text-ink-3">+{hiddenTagCount}</span>
		{/if}
	</div>
{/if}
