package components

import (
	"fmt"
)

type Link struct {
	Text string
	Link templ.SafeURL
}

templ Nav(links []Link) {
	<div
		aria-hidden="true"
		class="h-0 w-0 pointer-events-none bg-transparent!"
	>
		<div
			class="fixed left-0 top-0 w-screen z-100"
		>
			<div class="h-4rem bg-black z-100"></div>
			<div class="h-10vh bg-transparent bg-gradient-to-b from-black z-100"></div>
		</div>
	</div>
	<section
		class="flex flex-row justify-between fixed top-0 font-cal w-90% lg:w-80% xl:w-90% z-110"
	>
		<p
			class="text-gray contrast-more:text-light-gray cannot-hover md:block!"
		>
			Gustavo "Guz" L. de Mello
		</p>
		<p
			class="text-gray contrast-more:text-light-gray can-hover md:hidden"
		>
			Guz
		</p>
		<nav class="can-hover">
			<ul class="flex flex-row gap-3 list-none">
				for _, i := range links {
					<li class="transform-gpu hover:-translate-y-0.2 transition-transform">
						<a
							class={ "text-gray contrast-more:text-light-gray hover:text-white " +
							"no-underline hover:underline transition-color transition-1s" }
							id={ fmt.Sprintf("nav-anchor-%s", i.Link) }
							href={ i.Link }
						>
							{ i.Text }
						</a>
					</li>
				}
			</ul>
		</nav>
	</section>
	<button
		class={ "block p-0.3 bg-black/97 b-0 m-0 outline-0 shadow-2xl " +
		"fixed bottom-5 right-5 text-gray z-100 cannot-hover" }
		popovertarget="nav-popover"
	>
		<span class="i-solar:hamburger-menu-broken w-2rem h-2rem block">Menu</span>
	</button>
	<nav
		class={ "fixed pb-10 p-5 m-0 b-0 h-100vh bg-black/97 shadow-black shadow-2xl z-10 " +
		"animate slide-from-r fade-in overflow-hidden cannot-hover" }
		style="inset: unset; bottom: 0; right: 0; --anim-duration: 300ms; --anim-slide-from-x: 50%;"
		id="nav-popover"
		popover
	>
		<div class="text-right h-100% w-100% flex flex-col-reverse">
			<ul class="flex flex-col h-fit gap-3 font-cal text-xl pl-0 text-gray list-none">
				for _, i := range links {
					<li
						class={ "hover:text-white transform-gpu hover:-translate-y-0.2 " +
								"transition-transform after:content-['@'] " +
								"after:pl-4 after:i-solar:posts-carousel-vertical-line-duotone" }
					>
						<a
							class={ "text-gray hover:text-white no-underline " +
									"hover:underline transition-color transition-1s" }
							id={ fmt.Sprintf("nav-anchor-touch-%s", i.Link) }
							href={ i.Link }
						>
							{ i.Text }
						</a>
					</li>
				}
			</ul>
		</div>
	</nav>
}
