---
// Path: Store/src/layouts/BaseLayout.astro

import "../styles/main.scss";

interface Props {
	title?: string;
	description?: string;
	socialTitle?: string;
	socialDescription?: string;
	socialImage?: string;
	noindex?: boolean;
	structuredData?: Record<string, unknown> | Array<Record<string, unknown>>;
}

const siteTitle = "Royal Pop Accessory";
const siteUrl = "https://royal-pop-accessory.com";

const {
	title = siteTitle,
	description = "Upgrade your watch with Royal Pop Accessory — bold interchangeable strap accessories in standout colourways, built to change your look in seconds.",
	socialTitle,
	socialDescription,
	socialImage = "/images/png/pure-white.png",
	noindex = false,
	structuredData,
} = Astro.props;

const documentTitle = title === siteTitle ? siteTitle : `${title} | ${siteTitle}`;
const metadataTitle = socialTitle ?? documentTitle;
const metadataDescription = socialDescription ?? description;
const canonicalUrl = new URL(Astro.url.pathname, siteUrl).toString();
const socialImageUrl = new URL(socialImage, siteUrl).toString();
const robotsContent = noindex ? "noindex, nofollow" : "index, follow";
const structuredDataItems = structuredData
	? Array.isArray(structuredData)
		? structuredData
		: [structuredData]
	: [];
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<meta name="description" content={description} />
		<meta name="robots" content={robotsContent} />
		<link rel="canonical" href={canonicalUrl} />
		<meta property="og:type" content="website" />
		<meta property="og:site_name" content={siteTitle} />
		<meta property="og:url" content={canonicalUrl} />
		<meta property="og:title" content={metadataTitle} />
		<meta property="og:description" content={metadataDescription} />
		<meta property="og:image" content={socialImageUrl} />
		<meta name="twitter:card" content="summary_large_image" />
		<meta name="twitter:title" content={metadataTitle} />
		<meta name="twitter:description" content={metadataDescription} />
		<meta name="twitter:image" content={socialImageUrl} />
		{
			structuredDataItems.map((item) => (
				<script type="application/ld+json" set:html={JSON.stringify(item)} />
			))
		}
		<meta name="theme-color" content="#e9e9e9" />
		<meta name="msapplication-TileColor" content="#e9e9e9" />

		<!-- Favicon -->
		<link rel="icon" type="image/x-icon" href="/favicon/favicon.ico" />
		<link rel="icon" type="image/png" sizes="48x48" href="/favicon/favicon-48x48.png" />
		<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
		<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
		<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
		<link rel="manifest" href="/favicon/site.webmanifest" />
		<meta name="msapplication-config" content="/favicon/browserconfig.xml" />

		<!-- Fonts Preload -->
		<!-- TODO: Custom font, added later -->
		<!-- <link rel="preload" href="/fonts/Geist.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> -->

		<!-- Helper Scripts -->
		<script is:inline>
			const getTheme = () => {
				if (typeof localStorage !== "undefined" && localStorage.getItem("color-scheme")) {
					return localStorage.getItem("color-scheme");
				}
				if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
					return "dark";
				}
				return "light";
			};

			const applyTheme = () => {
				const theme = getTheme();
				document.documentElement.setAttribute("data-color-scheme", theme);
			};

			applyTheme();

			document.addEventListener("astro:before-swap", (ev) => {
				const currentTheme = document.documentElement.getAttribute("data-color-scheme");
				ev.newDocument.documentElement.setAttribute("data-color-scheme", currentTheme);
			});
		</script>

		<title>{documentTitle}</title>
	</head>
	<body>
		<slot />
	</body>
</html>
