---
import Footer from '@/components/Footer.astro';
import Navbar from '@/components/Navbar.astro';
import { AppConfig } from '@/utils/AppConfig';

export interface Props {
	head: {
		title: string;
		description: string;
	};
}

const {
	head: { title, description }
} = Astro.props as Props;
---

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>{title}</title>
		<meta name="description" content={description} />
		<meta name="author" content={AppConfig.author} />

    <link rel="sitemap" href="/sitemap-index.xml" />
		<link rel="alternate" type="application/rss+xml" href="/rss.xml" />
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛠️</text></svg>">

		<script>
			if (
				localStorage.getItem('dark-mode') === 'true' ||
				(!('dark-mode' in localStorage) &&
					window.matchMedia('(prefers-color-scheme: dark)').matches)
			) {
				localStorage.setItem('dark-mode', 'true');
				document.querySelector('html')?.classList.add('dark');
			} else {
				localStorage.setItem('dark-mode', 'false');
				document.querySelector('html')?.classList.remove('dark');
			}
		</script>
	</head>
	<body
		class="flex min-h-screen flex-col bg-stone-100 font-mono text-gray-950 dark:bg-stone-900 dark:text-white"
	>
		<Navbar />
		<div class="flex-1">
			<slot />
		</div>

		<Footer />
	</body>
</html>
<style is:global>
	:root {
	}
</style>
