---
import { ViewTransitions } from 'astro:transitions';
import '@/styles/globals.css';
import Header from '@/components/layout/Header.astro';
import Footer from '@/components/layout/Footer.astro';

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

<html lang="en">
	<head>
		<title>{title}</title>
		<meta name="description" content={description} />
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="theme-color" content="#61a8e1" />
		<link rel="icon" href="/favicon.ico" sizes="48x48" />
		<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
		<link rel="manifest" href="/site.webmanifest" />
		<link rel="sitemap" href="/sitemap-index.xml" />
		<ViewTransitions />
	</head>
	<body class="flex min-h-screen flex-col dark:bg-secondary">
		<Header />
		<main class="flex-grow">
			<slot />
		</main>
		<Footer />
	</body>
</html>
