package layouts

// BottomNav renders a fixed bottom navigation bar for mobile.
// activePage should be "home", "connections", "event", or "settings".
templ BottomNav(activePage string) {
	<nav class="bottom-nav" aria-label="Main navigation">
		<a href="/" class={ "bottom-nav-item", templ.KV("bottom-nav-active", activePage == "home") }>
			<span class="bottom-nav-icon">⌂</span>
			<span class="bottom-nav-label">Home</span>
		</a>
		<a href="/connections" class={ "bottom-nav-item", templ.KV("bottom-nav-active", activePage == "connections") }>
			<span class="bottom-nav-icon">⇄</span>
			<span class="bottom-nav-label">Connections</span>
		</a>
		<a href="/events" class={ "bottom-nav-item", templ.KV("bottom-nav-active", activePage == "event") }>
			<span class="bottom-nav-icon">◉</span>
			<span class="bottom-nav-label">Events</span>
		</a>
		<a href="/settings" class={ "bottom-nav-item", templ.KV("bottom-nav-active", activePage == "settings") }>
			<span class="bottom-nav-icon">⚙</span>
			<span class="bottom-nav-label">Settings</span>
		</a>
	</nav>
}

// TopNav renders inline tab navigation for desktop, placed inside the window bar.
templ TopNav(activePage string) {
	<div class="top-nav">
		<a href="/" class={ "top-nav-item", templ.KV("top-nav-active", activePage == "home") }>
			<span class="top-nav-icon">⌂</span>Home
		</a>
		<a href="/connections" class={ "top-nav-item", templ.KV("top-nav-active", activePage == "connections") }>
			<span class="top-nav-icon">⇄</span>Connections
		</a>
		<a href="/events" class={ "top-nav-item", templ.KV("top-nav-active", activePage == "event") }>
			<span class="top-nav-icon">◉</span>Events
		</a>
		<a href="/settings" class={ "top-nav-item", templ.KV("top-nav-active", activePage == "settings") }>
			<span class="top-nav-icon">⚙</span>Settings
		</a>
	</div>
}