---
import { validateAccessTokenServer } from "#server/lib/validateAccessToken";
import ThemeController from "./ThemeController.svelte";

const valid = await validateAccessTokenServer(Astro)

const lightTheme = Astro.cookies.get("theme")?.value === "light";
---

<header>
	<a class="hidden md:block w-full h-48 bg-base-200" href="/">
		<img
			src="/images/header/header-bg.jpg"
			class="w-full h-full object-cover"
			alt="Hintergrund - Rollen Architektenpapier"
		/>
			<img
				src="/images/header/logo-big.svg"
				class="absolute top-4 right-0 w-[464px]"
				alt="IBCornelsen - Logo"
			/>
			<h2
				class="text-secondary font-semibold text-2xl absolute top-8 right-4"
			>
				Energieausweis online erstellen
			</h2>
			<h2
				class="text-primary font-semibold text-xl absolute top-16 right-4"
			>
				Energieausweise nach aktueller GEG
			</h2>
	</a>

	<div class="px-4 flex flex-row w-full md:justify-end items-center bg-primary">
		<a
			class="header-button hidden md:block"
			href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
			>Energieausweis erstellen</a
		>
		<a class="header-button hidden md:block" href="/kontakt"
			>Kontakt</a
		>
		<a class="header-button hidden md:block" href="/agb">AGB</a>
			{
				valid ? (
					<a class="header-button" href="/dashboard">
						Profil
					</a>
				) : (
					<a class="header-button" href="/auth/login">
						Login
					</a>
				)
			}
			<ThemeController lightTheme={lightTheme} client:load />
			<a class="hamburger_menu"
				><img src="/images/hamburger.png" width="22" alt="hamburger" /></a
			>
		</div>
</header>


<style>
	.header-button {
		@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
	}
</style>