---
import i18next from "i18next";
import {localizeUrl} from "astro-i18next"
import { t } from "i18next";
import { isLoggedIn } from "../lib/UI/isLoggedIn";
import LanguageDropdown from "./LanguageDropdown.svelte";

const loggedIn = isLoggedIn(Astro);
---

<header class="header">
	<div class="headmargin">
		<img
			src="/images/header/header-bg.jpg"
			class="headerBackgroundImage"
			alt="Hintergrund - Rollen Architektenpapier"
		/>
		<div class="branding">
			<img
				src="/images/header/logo-big.png"
				class="header-logo"
				alt="IBCornelsen - Logo"
				onclick="
				window.location.href = '/'
"
			/>
			<h2
				class="text-secondary font-semibold text-2xl absolute top-8 right-0"
			>
				Energieausweis online erstellen
			</h2>
			<h2
				class="text-primary font-semibold text-xl absolute top-16 right-0"
			>
				Energieausweise nach aktueller GEG
			</h2>
		</div>
	</div>

	<div class="nav-head">
		<LanguageDropdown
			countries={[
				{ iso: "de", flag: "de", name: "Deutsch" },
				{ iso: "en", flag: "us", name: "English" },
				{ iso: "fr", flag: "fr", name: "Français" },
			]}
			localized={i18next.languages.map(l => {
				return { lang: l, path: localizeUrl(Astro.request.url, l)};
			})}
			current={i18next.language}
			client:load
		/>
		<a
			class="headerButton"
			href="/energieausweis-erstellen/verbrauchsausweis-erstellen.php"
			>Energieausweis erstellen</a
		>
		<a class="headerButton" href="/energieausweis-kontakt.php"
			>{t("header.kontakt")}</a
		>
		<a class="headerButton" href="/agb">AGB</a>
		{
			loggedIn ? (
				<a class="headerButton" href="/user">
					{t("header.profil")}
				</a>
			) : (
				<a class="headerButton" href="/login">
					{t("header.login")}
				</a>
			)
		}
		<a class="hamburger_menu"
			><img src="/images/hamburger.png" alt="hamburger" /></a
		>
	</div>
</header>