<script lang="ts">
/**
 * A minimal fixed-series bar sparkline: one bar per value, heights scaled to the
 * largest value. Presentational only — callers supply the already-bucketed
 * counts. Used by the timeline density strip; reusable by the document chart.
 */
let {
	values,
	label,
	class: className = ''
}: { values: number[]; label?: string; class?: string } = $props();

const max = $derived(Math.max(1, ...values));

// Empty buckets keep a faint floor so the series reads as a continuous axis
// rather than disappearing to nothing.
const MIN_HEIGHT_PCT = 4;

function heightPct(value: number): number {
	if (value <= 0) return MIN_HEIGHT_PCT;
	return Math.max(MIN_HEIGHT_PCT, (value / max) * 100);
}
</script>

<div
	class="flex h-8 items-end gap-[1.5px] {className}"
	role="img"
	aria-label={label}
	aria-hidden={label ? undefined : 'true'}
>
	{#each values as value, i (i)}
		<div
			data-testid="sparkline-bar"
			class="flex-1 rounded-[1px] bg-brand-mint"
			style="height: {heightPct(value)}%"
		></div>
	{/each}
</div>
