---
interface Props {
  title: string;
  description: string;
  canonicalUrl: string;
  ogImage?: string;
  jsonLd?: object | object[];
  base: string;
  siteUrl: string;
}

const { title, description, canonicalUrl, jsonLd, base, siteUrl } = Astro.props;
const ogImage = Astro.props.ogImage ?? `${base}/images/prometheus-logo.png`;
const fullOgImage = ogImage.startsWith('http') ? ogImage : `${siteUrl}${ogImage}`;

const jsonLdArray = jsonLd
  ? Array.isArray(jsonLd) ? jsonLd : [jsonLd]
  : [];
---

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

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content={canonicalUrl} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={fullOgImage} />
<meta property="og:site_name" content="Awesome Prometheus Alerts" />

<!-- Twitter Card -->
<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={fullOgImage} />
<meta name="twitter:site" content="@samuelberthe" />

{jsonLdArray.map((schema) => (
  <script type="application/ld+json" set:html={JSON.stringify(schema)} />
))}