---
import Layout from "@layouts/Layout.astro";
import Prose from "@components/Prose.astro";
import FormattedDate from "@components/FormattedDate.astro";
import { readingTime } from "@lib/utils";
import { Icon } from "astro-icon/components";
import RelatedArticles from "@components/RelatedArticles.astro";

const { article, isPost = false } = Astro.props;
const { Content } = await article.render();

let datesMatch = false;
if (article.data.date.getTime() == article.data.updated?.getTime()) {
  datesMatch = true;
}

const listFormatter = new Intl.ListFormat("en-GB", {
  style: "long",
  type: "conjunction",
});
---

<Layout
  title={article.data.title}
  description={article.data.description}
  image={article.data.image.url.src}
  date={article.data.date}
  updated={article.data.updated}
  tags={article.data.tags}
>
  <div class="mx-auto mb-16 max-w-prose">
    <h1
      class="animate-reveal break-words text-start text-4xl font-semibold opacity-0"
    >
      <span class="text-secondary">{article.data.title}</span><span
        class="ml-2 text-tertiary">{article.data.description}</span
      >
    </h1>
    <div
      class="mt-4 flex animate-reveal flex-col flex-wrap items-start gap-2 text-lg text-tertiary opacity-0 [animation-delay:0.1s] md:flex-row"
    >
      <div class="flex items-center gap-2">
        <Icon name="mdi:calendar" />
        {
          datesMatch ? (
            <p title="Date">
              <FormattedDate date={article.data.date} />
            </p>
          ) : (
            <>
              <p title="Date">
                <FormattedDate date={article.data.date} />
              </p>
              <Icon name="mdi:trending-up" />
              <p title="Updated">
                <FormattedDate date={article.data.updated} />
              </p>
            </>
          )
        }
      </div>
      {
        isPost ? (
          <div class="flex items-center gap-2">
            <Icon name="mdi:timer" />
            <p title="Word count">{readingTime(article.body)}</p>
          </div>
        ) : null
      }
      {
        article.data.extraAuthors ? (
          <div class="flex items-center gap-2">
            <Icon name="mdi:account-plus" />
            <p title="Extra authors">
              {listFormatter.format(article.data.extraAuthors)}
            </p>
          </div>
        ) : null
      }
    </div>
  </div>
  <div
    class="mx-auto max-w-prose animate-reveal opacity-0 [animation-delay:0.2s]"
  >
    <Prose>
      <Content />
    </Prose>
  </div>
  <RelatedArticles entry={article} />
</Layout>
