---
import Section from "../components/common/Section.astro";
import type { ArticleFrontmatter } from "../lib/types";
import {
  getShortDescription,
  processArticleDate,
  generateSourceUrl,
} from "../lib/utils";
import { GLOBAL } from "../lib/variables";
import type { MarkdownLayoutProps } from "astro";
import Prose from "../components/Prose.astro";
import Layout from "./Layout.astro";

type Props = MarkdownLayoutProps<ArticleFrontmatter>;

const { frontmatter } = Astro.props;
const shortDescription = getShortDescription(frontmatter.description);
const articleDate = processArticleDate(frontmatter.timestamp);
const sourceUrl = generateSourceUrl(frontmatter.filename, "blog");
---

<Layout>
  <Fragment slot="head">
    <title>{frontmatter.title} • {GLOBAL.username}</title>
    <meta name="description" content={frontmatter.description} />
    <meta property="og:title" content={`${frontmatter.title} • ${GLOBAL.username}`} />
    <meta property="og:description" content={shortDescription} />
    <meta property="og:image" content={`${GLOBAL.rootUrl}/${GLOBAL.profileImage}`} />
    <meta property="og:url" content={frontmatter.url} />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={`${frontmatter.title} • ${GLOBAL.username}`} />
    <meta name="twitter:description" content={shortDescription} />
    <meta name="twitter:image" content={`${GLOBAL.rootUrl}/${GLOBAL.profileImage}`} />
    <meta http-equiv="content-language" content="en" />
    <meta name="language" content="English" />
    <link rel="canonical" href={sourceUrl} />
  </Fragment>
  <Section class="pt-8">
    <div class="flex flex-col gap-4 mt-8 mb-16">
      <h1
        class="text-3xl sm:text-4xl leading-normal sm:leading-normal font-display"
      >
        {frontmatter.title}
      </h1>
      <div class="flex justify-between">
        <span>{articleDate}</span>
        <span>{frontmatter.time} min</span>
      </div>
    </div>
    <Prose>
      <slot />
    </Prose>
    <div class="flex flex-wrap gap-2 mt-4">
      {frontmatter.tags?.map((tag) => (
        <span class="-zag-text -zag-bg zag-transition px-2 py-1 text-sm font-semibold">
          {tag}
        </span>
      ))}
    </div>
    <p class="pt-8">~{GLOBAL.username}</p>
  </Section>
</Layout>