---
/**
 * Base Layout
 *
 * Main layout with header, footer, and navigation from EmDash menus.
 */

import { getMenu, getSiteSettings } from "emdash";
import "../styles/global.css";

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

const { title, description } = Astro.props;

// These APIs automatically get the database from the Astro context
const settings = await getSiteSettings();
const primaryMenu = await getMenu("primary");
const footerMenu = await getMenu("footer");

const siteTitle = settings.title || "My Site";
const pageTitle = title ? `${title} | ${siteTitle}` : siteTitle;
---

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>{pageTitle}</title>
		{description && <meta name="description" content={description} />}
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
	</head>
	<body>
		<header class="site-header">
			<div class="container">
				<a href="/" class="site-title">{siteTitle}</a>

				{
					primaryMenu && primaryMenu.items.length > 0 && (
						<nav class="site-nav">
							{primaryMenu.items.map((item) => (
								<a href={item.url}>{item.label}</a>
							))}
						</nav>
					)
				}
			</div>
		</header>

		<main>
			<slot />
		</main>

		<footer class="site-footer">
			<div class="container">
				{
					footerMenu && footerMenu.items.length > 0 && (
						<nav class="footer-nav">
							{footerMenu.items.map((item) => (
								<a href={item.url}>{item.label}</a>
							))}
						</nav>
					)
				}
				<p class="copyright">&copy; {new Date().getFullYear()} {siteTitle}</p>
			</div>
		</footer>
	</body>
</html>
