package main

// chromeNavbarComponent renders the beveled chrome navbar. The menu itself is
// hydrated client-side by the CMS; this block only owns the chrome shell and
// brand area.
templ chromeNavbarComponent(data ChromeNavbarData) {
	<nav class="y2k-chrome-bg y2k-bevel relative w-full" data-block-key="y2k:chrome_navbar" data-menu={ data.MenuName }>
		<div class="max-w-6xl mx-auto flex items-center justify-between gap-4 px-4 py-3">
			<a href="/" class="flex items-center gap-2 text-foreground no-underline">
				if data.LogoImage != "" {
					<img src={ data.LogoImage } alt={ data.LogoText } class="h-8 w-auto y2k-image-frame"/>
				} else {
					<span class="y2k-heading text-xl uppercase">{ defaultLogoText(data.LogoText) }</span>
				}
			</a>
			<button
				type="button"
				class="md:hidden y2k-button text-sm"
				aria-controls={ "y2k-nav-" + data.MenuName }
				aria-expanded="false"
				data-y2k-nav-toggle
			>
				Menu
			</button>
			<div id={ "y2k-nav-" + data.MenuName } class="hidden md:flex items-center gap-4" data-menu-target={ data.MenuName }>
				<span class="text-muted-foreground text-sm uppercase tracking-wider">{ "menu:" + data.MenuName }</span>
			</div>
		</div>
		<span class="y2k-sparkle absolute right-3 top-1 text-accent">*</span>
	</nav>
}

func defaultLogoText(s string) string {
	if s == "" {
		return "y2k.fm"
	}
	return s
}