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

/**
 * A single root-tag chip on a timeline letter card (§3 of the Zeitstrahl spec): a
 * decorative colored square marker plus the tag name, prefixed for screen readers by
 * an sr-only theme label so color is never the only cue (WCAG 1.4.1, REQ-011). The
 * name is curator/import-derived and rendered via default `{...}` escaping — never the
 * raw-HTML directive (REQ-010). `color` is a `--c-tag-*` token or null; a null color
 * renders a neutral marker with no `var(--c-tag-)` reference (REQ-007). Truncation is set inline
 * (not via a utility class) so a long name ellipsizes even before the stylesheet loads,
 * keeping the card free of horizontal overflow at 320px (REQ-008a).
 */
let { name, color }: { name: string; color: string | null } = $props();

const squareStyle = $derived(color ? `background-color: var(--c-tag-${color})` : '');
</script>

<span
	data-testid="tag-chip"
	title={name}
	style="display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0"
	class="mt-1 self-start rounded-full border border-line bg-surface px-2 py-0.5"
>
	<span class="sr-only">{m.timeline_tag_chip_label()}: </span>
	<!-- One marker for both states: a set color paints it via squareStyle; a null color leaves
	     squareStyle empty and falls back to the neutral bg-ink-3 (no var(--c-tag-) reference). -->
	<span
		data-testid="tag-chip-square"
		aria-hidden="true"
		style={squareStyle}
		class="inline-block h-2 w-2 flex-shrink-0 rounded-sm"
		class:bg-ink-3={!color}
	></span>
	<!-- Overflow/ellipsis set inline (not via Tailwind's `truncate`) so the name ellipsizes even
	     before the stylesheet loads, keeping the card overflow-free at 320px (REQ-008a). -->
	<span
		style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0"
		class="font-sans text-[11px] text-ink-2">{name}</span
	>
</span>
