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

/**
 * A folded run of fully-empty interior years (REQ-015), rendered as a thin
 * dashed span so the scroll stays oriented. Collapses to a single year when the
 * run has length 1.
 */
let { from, to }: { from: number; to: number } = $props();

const yearLabel = $derived(from === to ? `${from}` : `${from}–${to}`);
</script>

<div
	class="mx-auto my-2 flex max-w-md items-center gap-2 rounded-full border border-dashed border-line bg-canvas px-4 py-1 font-sans text-xs text-ink-3"
>
	<span class="h-px flex-1 bg-line"></span>
	<span><span class="font-serif text-ink-2">{yearLabel}</span> · {m.timeline_gap_empty()}</span>
	<span class="h-px flex-1 bg-line"></span>
</div>
