---
import '@/styles/globals.css';
import { Image } from 'astro:assets';
import { ModeToggle } from '@/components/ModeToggle';

import logoImage from '@/assets/images/logo.png';
---

<script is:inline>
	const getThemePreference = () => {
		if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
			return localStorage.getItem('theme');
		}
		return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
	};
	const isDark = getThemePreference() === 'dark';
	document.documentElement.classList[isDark ? 'add' : 'remove']('dark');

	if (typeof localStorage !== 'undefined') {
		const observer = new MutationObserver(() => {
			const isDark = document.documentElement.classList.contains('dark');
			localStorage.setItem('theme', isDark ? 'dark' : 'light');
		});
		observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
	}
</script>

<header
	class="sticky top-0 z-10 block h-max w-full max-w-full rounded-none border border-white/80 bg-opacity-80 px-4 py-2 text-black shadow-md backdrop-blur-2xl backdrop-saturate-200 dark:border-black/80 dark:bg-zinc-900 lg:px-8 lg:py-4">
	<div class="flex items-center justify-between text-zinc-900 dark:text-zinc-100">
		<a
			href="/"
			class="mr-4 block cursor-pointer py-1.5 font-sans text-base font-medium leading-relaxed text-inherit antialiased">
			<div class="flex items-center gap-2 lg:gap-4">
				<Image src={logoImage} alt="Astro Deploy" class="-my-2 size-10 lg:-my-4 lg:size-14" />
				Astro Deploy
			</div>
		</a>
		<ModeToggle client:load />
	</div>
</header>