package main

// missionStatComponent renders the headline metric card with mono numerals
// and an accent-colored delta arrow.
templ missionStatComponent(data MissionStatData) {
	<div data-block="scifi-clean:mission_stat" class="hairline p-6 bg-card text-card-foreground">
		if data.Metric != "" {
			<div class="scifi-mono uppercase text-xs tracking-widest text-muted-foreground mb-3">
				{ data.Metric }
			</div>
		}
		<div class="flex items-baseline gap-2">
			<span
				class="scifi-mono text-5xl font-medium tabular-nums text-foreground"
				style="font-family: var(--font-mono); font-variant-numeric: tabular-nums;"
			>
				if data.Value == "" {
					{ "—" }
				} else {
					{ data.Value }
				}
			</span>
			if data.Unit != "" {
				<span class="scifi-mono text-base text-muted-foreground tabular-nums" style="font-family: var(--font-mono); font-variant-numeric: tabular-nums;">
					{ data.Unit }
				</span>
			}
		</div>
		if data.Delta != "" {
			<div class="mt-3 scifi-mono text-sm tabular-nums" style={ "font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: hsl(var(--accent));" }>
				{ trendGlyph(data.Trend) } { data.Delta }
			</div>
		}
	</div>
}