---
import { ClientRouter } from "astro:transitions";
import NavigationBar from "../components/NavigationBar.vue";
import ScrollUpButton from "../components/ScrollUpButton.vue";
import { config } from "../config";
import type { OpenGraphImage } from "../types";
const currentPath = Astro.url.pathname;
import "../styles/global.css";

export interface Props {
    title?: string;
    description?: string;
    ogImage?: OpenGraphImage;
    ogType?: "website" | "article";
}

const { title, description, ogImage, ogType } = Astro.props;

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

const og = config.siteConfig.openGraph;
const canonicalUrl = new URL(Astro.url.pathname, config.siteConfig.meta.url)
    .href;
const resolvedOgImage = ogImage || og.image;
const resolvedOgImageUrl = new URL(resolvedOgImage.url, config.siteConfig.meta.url).href;
const resolvedOgType = ogType || og.type || "website";
---

<!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" />
        <link rel="canonical" href={canonicalUrl} />
        <meta name="generator" content={Astro.generator} />
        <meta name="description" content={pageDescription} />
        <meta name="author" content={config.siteConfig.meta.author} />
        <title>{pageTitle}</title>

        <meta property="og:title" content={pageTitle} />
        <meta property="og:description" content={pageDescription} />
        <meta property="og:type" content={resolvedOgType} />
        <meta property="og:url" content={canonicalUrl} />
        {og.siteName && <meta property="og:site_name" content={og.siteName} />}
        {og.locale && <meta property="og:locale" content={og.locale} />}
        <meta property="og:image" content={resolvedOgImageUrl} />
        <meta property="og:image:width" content={String(resolvedOgImage.width)} />
        <meta property="og:image:height" content={String(resolvedOgImage.height)} />
        <meta property="og:image:type" content={resolvedOgImage.type} />
        <meta property="og:image:alt" content={resolvedOgImage.alt} />

        <ClientRouter />
    </head>
    <body class="flex flex-col min-h-screen overflow-x-hidden">
        <main
            class="grow flex flex-col gap-4 items-center justify-center pb-17 sm:pb-19"
        >
            <slot />
        </main>
        <NavigationBar client:load currentPath={currentPath} />
        <ScrollUpButton client:load />
    </body>
</html>
