---
import { ClientRouter } from "astro:transitions";
import NavigationBar from "../components/NavigationBar";
import ScrollUpButton from "../components/ScrollUpButton";
import { siteConfig } from "../config/data";
const currentPath = Astro.url.pathname;
import '../styles/global.css';

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

const { title, description } = Astro.props;

const pageTitle = title ? `${title} | ${siteConfig.meta.title}` : siteConfig.meta.title;
const pageDescription = description || siteConfig.meta.description;
---

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
		<meta name="generator" content={Astro.generator} />
		<meta name="description" content={pageDescription} />
		<meta name="author" content={siteConfig.meta.author} />
		<title>{pageTitle}</title>
		<ClientRouter />
	</head>
	<body class="flex flex-col min-h-screen overflow-x-hidden">
        <main class="flex-grow flex flex-col gap-4 items-center justify-center pb-24 sm:pb-20">
			<slot />
        </main>
        <NavigationBar client:load currentPath={currentPath} />
        <ScrollUpButton client:load />
  </body>
</html>
