---
import { ThemeSelector } from "./ThemeSelector"
import NavbarSkeleton from "./NavbarSkeleton.astro";
import { LangSwitcher } from "./LangSwitcher";
import { NavButton } from "./NavButton";
import { useTranslations, getLangFromUrl } from "../i18n/utils";

function selected(path) {
	var currentURL = Astro.url.pathname
			.replace(Astro.currentLocale + "/", "") || "/"
	if( path == "/blog" && currentURL.startsWith("/blog") ){
		return (true);
	}
	return (
		currentURL == path
	);
}

const locale = Astro.currentLocale ? Astro.currentLocale : "en"

const t = useTranslations(getLangFromUrl(Astro.url));

---
<NavbarSkeleton>
	<!-- Page Navigation -->
	<div class="flex gap-1">
		<a href={`/${locale}/`}>
			<NavButton selected={selected("/")} variant="home" tooltip={t("navbar")["home"]} client:load />
		</a>
		<a href={`/${locale}/blog`}>
			<NavButton selected={selected("/blog")} variant="blog" tooltip={t("navbar")["blog"]} client:load />
		</a>
		<a href={`/${locale}/music`}>
			<NavButton selected={selected("/music")} variant="music" tooltip={t("navbar")["music"]} client:load/>
		</a>
	</div>

	<!-- Logo -->
	<div>
		<!-- <Icon icon="favicon" class={"h-8 w-8 text-content"} /> -->
	</div>

	<!-- Options (language, light/dark mode) -->
	<div class="flex gap-1">
		<LangSwitcher tooltip={t("navbar")["lang"]} client:load client:only="react"/>
		<ThemeSelector tooltip={t("navbar")["mode"]} client:load client:only="react"/>
	</div>
</NavbarSkeleton>