---
import { ClientRouter } from "astro:transitions";

import { GoogleAnalytics } from "astro-google-analytics";
const {
  title = "Centro del Reino de Paz y Justicia",
  description = "",
  image = null,
  url = null,
  date = null,
} = Astro.props;

const imageUrl = image ? new URL(image, Astro.site).toString() : null;
const canonicalURL = new URL(url || Astro.url.pathname, Astro.site);
---

<head>
  <meta charset="utf-8" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="generator" content={Astro.generator} />
  <GoogleAnalytics id="G-26KM3HWW9J" />

  <title>{title}</title>
  <meta property="og:site_name" content={title} />
  <meta name="description" content={description} />

  <!-- Open Graph -->

  {url && <meta property="og:url" content={url} />}
  <meta property="og:type" content="article" />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <link rel="canonical" href={canonicalURL} />
  <meta name="telegram:channel" content="@CentroRPJ" />

  {imageUrl && <meta property="og:image" content={imageUrl} />}
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />

  {
    date && (
      <meta
        property="article:published_time"
        content={
          date instanceof Date
            ? `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
                2,
                "0"
              )}-${String(date.getDate()).padStart(2, "0")}`
            : date
        }
      />
    )
  }

  <!-- Twitter -->

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={title} />
  <meta name="twitter:description" content={description} />
  {imageUrl && <meta name="twitter:image" content={imageUrl} />}
  {url && <meta name="twitter:url" content={url} />}
</head>
<ClientRouter />
