---
import Navigation from '../components/nav.astro'
import Footer from '../components/footer.astro'
import { getLangFromUrl } from '../i18n/utils';
import '../styles/global.css'

interface Props {
	title: string;
}

const { title } = Astro.props;
const lang = getLangFromUrl(Astro.url);
// const t = useTranslations(lang);
---

<!doctype html>
<html lang={lang}>
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content="Astro description" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="generator" content={Astro.generator} />
		<title>{title}</title>
	</head>
	<body>
		<header>
			<Navigation />
		</header>
		<main>
			<slot />
		</main>
		<Footer />
	</body>
</html>
<style is:global lang="scss">
	html, a:visited {
		font-family: system-ui, sans-serif;
		background-color: var(--background-color);
		color: var(--foreground-color);
	}
	body {
		max-width: 1200px;
		margin: 0 auto;
		display: grid;
		grid-template-rows: auto 1fr auto;
		min-height: 100vh;
	}
	code {
		font-family:
			Menlo,
			Monaco,
			Lucida Console,
			Liberation Mono,
			DejaVu Sans Mono,
			Bitstream Vera Sans Mono,
			Courier New,
			monospace;
	}
	header {
		margin: 1rem 1rem;
	}
	main {
		margin: 0 1rem;
	}
</style>
