package main

// navbarTerminalComponent renders the cyberpunk:navbar_terminal block.
// At ≤768px the link list collapses behind an aria-expanded toggle button.
templ navbarTerminalComponent(data NavbarTerminalData) {
	<nav
		data-block="cyberpunk:navbar_terminal"
		class="cyberpunk-navbar w-full"
		style="background-color: hsl(var(--background) / 0.85); border-bottom: 1px solid hsl(var(--border));"
	>
		<div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between gap-4">
			<div class="flex items-center gap-3 min-w-0">
				if data.StatusDot {
					<span
						aria-hidden="true"
						class="cyberpunk-status-dot inline-block w-2 h-2 rounded-full"
						style="background-color: hsl(var(--accent)); box-shadow: 0 0 8px hsl(var(--accent));"
					></span>
				}
				<span class="cyberpunk-mono text-sm" style="color: hsl(var(--accent));">
					{ data.CommandPrefix }
				</span>
				<span class="cyberpunk-mono text-sm truncate" style="color: hsl(var(--foreground));">
					{ data.MenuName }
				</span>
				<span aria-hidden="true" class="caret-blink cyberpunk-mono text-sm" style="color: hsl(var(--primary));">_</span>
			</div>
			<button
				type="button"
				aria-expanded="false"
				aria-controls="cyberpunk-navbar-links"
				class="cyberpunk-navbar-toggle md:hidden inline-flex items-center justify-center px-3 py-2 rounded-md cyberpunk-mono uppercase text-xs tracking-widest"
				style="border: 1px solid hsl(var(--border)); color: hsl(var(--foreground));"
				data-cyberpunk-navbar-toggle
			>
				MENU
			</button>
			<ul
				id="cyberpunk-navbar-links"
				class="cyberpunk-navbar-links hidden md:flex items-center gap-6 cyberpunk-mono text-sm uppercase tracking-widest"
				style="color: hsl(var(--muted-foreground));"
				data-menu-name={ data.MenuName }
			>
				<li class="cyberpunk-navbar-hint" style="color: hsl(var(--muted-foreground));">
					{ "// menu items resolve at runtime" }
				</li>
			</ul>
		</div>
	</nav>
}