package main

// statusBarComponent renders the sticky top status rail.
// UAT §13.9 requires position: sticky and top: 0.
templ statusBarComponent(data StatusBarData) {
	<div
		data-block="scifi-clean:status_bar"
		class="w-full hairline-b bg-card text-card-foreground scifi-mono text-xs uppercase tracking-widest"
		style="position: sticky; top: 0; z-index: 30;"
	>
		<div class="max-w-6xl mx-auto px-4 py-2 flex items-center justify-between gap-4">
			<div class="flex items-center gap-3">
				<span class="text-muted-foreground">{ data.Callsign }</span>
				<span class="text-muted-foreground">|</span>
				<span class="text-foreground">PUBLIC</span>
			</div>
			<div class="flex items-center gap-3 tabular-nums">
				if data.ShowClock {
					<span
						data-status-bar-clock="utc"
						class="text-muted-foreground tabular-nums"
					>
						{ "00:00:00 UTC" }
					</span>
				}
				if data.ShowBuild {
					<span class="text-muted-foreground">|</span>
					<span class="text-foreground tabular-nums">BLD a1b2c3</span>
				}
			</div>
		</div>
		<script>
		(function(){
			var el = document.querySelector('[data-status-bar-clock="utc"]');
			if (!el) return;
			function fmt(n){ return n < 10 ? '0' + n : String(n); }
			function tick(){
				var d = new Date();
				el.textContent = fmt(d.getUTCHours()) + ':' + fmt(d.getUTCMinutes()) + ':' + fmt(d.getUTCSeconds()) + ' UTC';
			}
			tick();
			setInterval(tick, 1000);
		})();
		</script>
	</div>
}