---
import site from "../data/site";

import { ClientRouter } from "astro:transitions";

import Analytics from "@components/Analytics.astro";
import SEO from "@components/SEO.astro";
import ThemeManager from "@components/ThemeManager.astro";

interface Props {
  title?: string;
  subtitle?: string;
  description?: string;
  image?: SiteImage;
}

const { title, subtitle, description, image } = Astro.props;

// if a title is provided, use it as follows "title | site.title - site.suffix". If no title is provided, instead do "site.title - site.suffix"
const headTitle: string =
  (title ? `${title}${subtitle ? ` - ${subtitle}` : ""} | ` : "") +
  (site.title != title ? `${site.title}` : "");
const headDescription: string = description || site.description;
---

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="generator" content={Astro.generator} />
  <title>{headTitle}</title>
  <meta name="description" content={headDescription} />

  <link rel="icon" type="image/png" href="/favicon.png" />
  <link rel="apple-touch-icon" href="/favicon.png" />

  <link rel="sitemap" href="/sitemap-index.xml" />
  <SEO title={headTitle} description={headDescription} {image} />

  <ThemeManager defaultTheme="auto" />

  <meta name="theme-color" content="#ff2d00" />

  <Analytics />

  <ClientRouter />
</head>
