package header

import "fmt"

templ Header(params HeaderParams) {
	<header class="w-full sticky top-0 z-50 px-4 mb-8">
		<nav class="flex justify-between items-center mx-auto max-w-7xl h-16">
			<a class="text-xl font-medium" href="/">shlf.space <span class="text-xs font-normal italic">alpha</span></a>
			<div class="flex gap-2 items-center">
				if params.User != nil {
					<details class="relative inline-block text-left">
						<summary class="cursor-pointer list-none flex gap-2 items-center">
							<div class="flex items-center justify-center w-7 h-7 rounded-full bg-gray-100">
								<i class="w-4 h-4" data-lucide="user"></i>
							</div>
							<span class="text-sm">{ params.User.Account.Handle }</span>
						</summary>
						<div class="absolute flex flex-col right-0 mt-2 p-1 gap-1 w-48 bg-white drop-shadow-sm">
							<a
								href={ templ.SafeURL(fmt.Sprintf("/%s/books", params.User.Account.Did)) }
								class="button border-none text-sm w-full"
							>
								My books
							</a>
							<hr/>
							<button type="button" hx-post="/logout" hx-swap="none" class="button border-none text-sm w-full">
								<i class="w-4 h-4" data-lucide="log-out"></i>
								Log out
							</button>
						</div>
					</details>
					<details class="relative inline-block text-left">
						<summary class="cursor-pointer list-none flex gap-2 items-center">
							<span>🇰🇷</span>
						</summary>
						<div class="absolute flex flex-col right-0 mt-2 p-1 gap-1 w-48 bg-white drop-shadow-sm">
							<button
								type="button"
								@click="localStorage.setItem('shlf-language', 'ko');"
								hx-swap="none"
								class="button border-none text-sm w-full"
							>
								<span>🇰🇷 Korean</span>
							</button>
						</div>
					</details>
				} else {
					<a href="/login">login</a>
				}
			</div>
		</nav>
	</header>
}