---
import '../styles/global.css';

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

const {
  title,
  description,
  canonicalPath = Astro.url.pathname,
  ogImage = '/og-image.svg',
} = Astro.props;

const canonical = new URL(canonicalPath, Astro.site ?? 'https://www.cameleer.io').toString();
const ogUrl = new URL(ogImage, Astro.site ?? 'https://www.cameleer.io').toString();
---
<!doctype html>
<html lang="en" class="bg-bg">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="dark" />
    <meta name="theme-color" content="#060a13" />
    <meta name="generator" content={Astro.generator} />

    <title>{title}</title>
    <meta name="description" content={description} />
    <link rel="canonical" href={canonical} />

    <link rel="icon" type="image/png" sizes="32x32" href="/icons/cameleer-32.png" />
    <link rel="apple-touch-icon" href="/icons/cameleer-180.png" />

    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Cameleer" />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:url" content={canonical} />
    <meta property="og:image" content={ogUrl} />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={title} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={ogUrl} />

    <meta name="robots" content="index,follow" />
  </head>
  <body class="min-h-screen bg-bg text-text font-sans antialiased">
    <slot />
  </body>
</html>
