---
import '@styles/global.css';
import { ClientRouter } from 'astro:transitions';
import { BASE_PATH } from 'astro:env/server';
import logo512 from '@assets/img/logo-512.webp';
import favicon from '@assets/favicon.png';

interface Props {
  title: string;
  description?: string;
  keywords?: string[];
  openGraph?: boolean;
  viewTransition?: boolean;
}

const { title, description, keywords, openGraph, viewTransition } = Astro.props;
---

<!doctype html>
<html lang="en" transition:name="root" transition:animate="none">
  <head>
    {viewTransition && <ClientRouter />}
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/png" href={favicon.src} />
    <title>{title}</title>
    {
      openGraph && (
        <>
          <meta name="og:title" content={title} />
          <meta property="og:url" content={Astro.url.pathname} />
          <meta property="og:type" content="website" />
          <meta property="og:image" content={logo512.src} />
        </>
      )
    }
    <meta name="description" content={description} />
    {keywords && <meta name="keywords" content={keywords.join(', ')} />}
    <base href=`${BASE_PATH}/` />
  </head>
  <body>
    <slot />
  </body>
</html>
