---
import '../styles/global.css';
import { Sprite } from 'astro-icon';

import ThemeProvider from '../components/ThemeProvider.astro';
import PageHeader from '../components/PageHeader.astro';
import PageFooter from '../components/PageFooter.astro';

export interface Props {
	backLink?: string;
	description?: string;
	footer?: boolean;
	header?: boolean;
	title: string;
}

const { backLink, footer = true, header = true, title, description } = Astro.props;
---

<!DOCTYPE html>
<html lang="en" class="no-js box-border scroll-smooth text-[125%]">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="generator" content={Astro.generator} />

		<title>{title}</title>

		<script type="module">
			document.documentElement.classList.remove('no-js');
			document.documentElement.classList.add('js');
		</script>

		<link rel="icon" href="/favicon.ico" sizes="any" />
		<link rel="icon" href="/assets/images/branding/favicons/favicon.svg" type="image/svg+xml" />
		<link rel="apple-touch-icon" href="/assets/images/branding/favicons/apple-touch-icon.png" />
		<!-- <link rel="manifest" href="/manifest.webmanifest" /> -->

		<link
			as="font"
			crossorigin
			href="/assets/fonts/secuela-regular-vf.woff2"
			rel="preload"
			type="font/woff2"
		/>
		<link
			as="font"
			crossorigin
			href="/assets/fonts/secuela-italic-vf.woff2"
			rel="preload"
			type="font/woff2"
		/>
		<ThemeProvider />
	</head>
	<body
		class="flex h-screen flex-col bg-shibui-100 font-sans font-normal leading-relaxed text-shibui-950 common-ligatures dark:bg-shibui-900 dark:text-shibui-200/[0.87]"
	>
		<Sprite.Provider>
			{header && <PageHeader backLink={backLink} />}
			<div class="page-content flex grow">
				<main class="h-full w-full">
					<slot />
				</main>
			</div>
			{footer && <PageFooter />}
		</Sprite.Provider>
	</body>
</html>
