---
import { SITE } from "@consts";
import gradient from "@assets/gradient.avif";
import { Font } from "astro:assets";

interface Props {
  title: string;
  description: string;
  image?: string;
  date?: Date;
  updated?: Date;
  tags?: Array<string>;
}

const canonicalURL = new URL(Astro.url.pathname, Astro.site);

const { title, description, image = gradient.src, date, updated } = Astro.props;
let { tags } = Astro.props;

if (typeof tags !== "undefined") {
  tags = SITE.KEYWORDS.concat(tags);
}
---

<head>
  <!-- Global Metadata -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta content="en-gb" name="lang" />

  <!-- Favicon -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />

  <!-- Generator -->
  <meta name="generator" content={Astro.generator} />

  <!-- Author -->
  <meta content={SITE.AUTHOR} name="author" />

  <!-- Sitemap -->
  <link rel="sitemap" href="/sitemap-index.xml" />

  <!-- RSS -->
  <link
    rel="alternate"
    type="application/rss+xml"
    title={SITE.TITLE}
    href="/feed.xml"
    }
  />
  <link
    rel="alternate"
    type="application/rss+xml"
    title=`${SITE.TITLE} Projects`
    href="/projects.xml"
    }
  />
  <link
    rel="alternate"
    type="application/rss+xml"
    title=`${SITE.TITLE} Posts`
    href="/posts.xml"
    }
  />

  <!-- Canonical URL -->
  <link rel="canonical" href={canonicalURL} />

  <!-- Primary Meta Tags -->
  <title>{title}</title>
  <meta name="title" content={title} />
  <meta name="description" content={description} />

  <!-- Keywords -->
  <meta
    content={tags ? tags?.toString() : SITE.KEYWORDS.toString()}
    name="keywords"
  />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content={Astro.url} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={new URL(image, Astro.url)} />

  <!-- Article times -->
  {
    date ? (
      <meta property="article:published_time" content={date.toISOString()} />
    ) : null
  }
  {
    updated ? (
      <meta property="article:modified_time" content={updated.toISOString()} />
    ) : null
  }

  <!-- Font Preload -->
  <Font cssVariable="--font-outfit" preload />
  <Font cssVariable="--font-red-hat-mono" preload />
</head>
