---
import MetaPixel from '../components/MetaPixel.astro';
import { site } from '../site';
import '../styles/global.css';

type Props = {
  title?: string;
  ogTitle?: string;
  description?: string;
  canonicalPath?: string;
  image?: string;
  type?: string;
};

const {
  title = site.name,
  ogTitle = title,
  description = site.description,
  canonicalPath = Astro.url.pathname,
  image,
  type = 'website',
} = Astro.props;

const canonicalUrl = new URL(canonicalPath, site.url).toString();
---

<!doctype html>
<html lang="lt">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
    <meta name="description" content={description} />
    <link rel="canonical" href={canonicalUrl} />
    <meta property="og:type" content={type} />
    <meta property="og:title" content={ogTitle} />
    <meta property="og:description" content={description} />
    <meta property="og:url" content={canonicalUrl} />
    <meta property="og:locale" content="lt_LT" />
    {image && <meta property="og:image" content={image} />}
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={ogTitle} />
    <meta name="twitter:description" content={description} />
    {image && <meta name="twitter:image" content={image} />}
  </head>
  <body class="min-h-screen text-ink antialiased">
    <MetaPixel />
    <slot />
  </body>
</html>
