<script lang="ts">
import { formatTickLabel, tickIndicesFor } from '$lib/shared/utils/monthBuckets';
import { getLocale } from '$lib/paraglide/runtime';
import type { components } from '$lib/generated/api';

type MonthBucket = components['schemas']['MonthBucket'];

let {
	filled
}: {
	filled: MonthBucket[];
} = $props();

const tickIndices = $derived(tickIndicesFor(filled));

// When all visible buckets share a year, the X-axis omits the year so a
// 12-month zoom reads as "Jan Feb Mär…" without repetition.
const omitTickYear = $derived.by(() => {
	if (filled.length === 0 || filled[0].month.length === 4) return false;
	const firstYear = filled[0].month.slice(0, 4);
	return filled.every((b) => b.month.slice(0, 4) === firstYear);
});
</script>

<div
	class="relative mt-1 h-4 font-sans text-xs leading-none text-ink-3"
	aria-hidden="true"
	data-testid="timeline-x-axis"
>
	{#each tickIndices as idx (filled[idx]?.month)}
		{@const tickLeftPct = ((idx + 0.5) / filled.length) * 100}
		<span
			class="absolute -translate-x-1/2 whitespace-nowrap"
			data-testid="timeline-x-tick"
			style="left: {tickLeftPct}%;"
		>
			{formatTickLabel(filled[idx].month, getLocale(), omitTickYear)}
		</span>
	{/each}
</div>
