---
import Layout from "@layouts/Layout.astro";
import Prose from "@components/Prose.astro";
import FormattedDate from "@components/FormattedDate.astro";
import { readingTime, createSlug } 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();

interface NameAndUrl {
  name: string;
  url: string;
}

function formatNamesWithLinks(namesAndUrls: NameAndUrl[]) {
  const listFormatter = new Intl.ListFormat("en-GB", {
    style: "long",
    type: "conjunction",
  });

  const linkedNames = namesAndUrls.map((item: NameAndUrl) => {
    return `<a href="${item.url}" rel="nofollow" target="_blank" class="underline hover:no-underline">${item.name}</a>`;
  });

  return listFormatter.format(linkedNames);
}

let formattedList: string | null = null;
if (article.data.extraAuthors && article.data.extraAuthors.length !== 0) {
  formattedList = formatNamesWithLinks(article.data.extraAuthors);
}
---

<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}
>
  <h1
    class="animate-reveal text-start text-3xl font-semibold break-words opacity-0"
  >
    <span class="text-secondary">{article.data.title}</span><span
      class="text-tertiary ml-2">{article.data.description}</span
    >
  </h1>
  <div
    class="animate-reveal text-tertiary flex flex-row flex-wrap items-start gap-2 font-medium opacity-0 [animation-delay:0.1s]"
  >
    <div class="flex flex-wrap items-center gap-2">
      <Icon name="mdi:calendar" />
      {
        !article.data.updated ? (
          <p>
            <FormattedDate date={article.data.date} />
          </p>
        ) : (
          <>
            <p>
              <FormattedDate date={article.data.date} />
            </p>
            <Icon name="mdi:trending-up" />
            <p>
              <FormattedDate date={article.data.updated} />
            </p>
          </>
        )
      }
      {
        isPost ? (
          <>
            <Icon name="mdi:timer" />
            <p>{readingTime(article.body)} mins</p>
          </>
        ) : null
      }
      {
        article.data.extraAuthors ? (
          <>
            <Icon name="mdi:account-plus" />
            <p set:html={formattedList} />
          </>
        ) : null
      }
      {
        article.data.tags ? (
          <>
            <Icon name="mdi:tag" />
            {article.data.tags.map((tag: string) => (
              <a
                href={`/tags/${createSlug(tag)}`}
                class="underline hover:no-underline"
              >
                {tag}
              </a>
            ))}
          </>
        ) : null
      }
    </div>
  </div>
  <div
    class="animate-reveal mx-auto max-w-full opacity-0 [animation-delay:0.2s]"
  >
    <Prose>
      <Content />
    </Prose>
  </div>
  <RelatedArticles entry={article} />
</Layout>
