---

import type { CollectionEntry } from 'astro:content';
import FormattedDate from '@/components/FormattedDate.astro';

interface Props {
  post: CollectionEntry<'blog'>;
  authors: CollectionEntry<'authors'>[];
}

const { post, authors } = Astro.props;
---

<article>
  <a href={`/blog/${post.id}`} class="group grid max-w-3xl">
    <time
      datetime={post.data.pubDate.toISOString()}
      class="mb-1 font-display text-h4 font-bold text-orange"
    >
      <FormattedDate date={post.data.pubDate} />
    </time>
    <div class="mb-3">
      <h2
        class="mb-3 font-display text-h25 leading-tight uppercase underline group-intent:decoration-gold"
      >
        {post.data.title}
      </h2>
      {
        authors.length > 0 && (
          <div class="mb-4 font-bold">
            {new Intl.ListFormat("en", {
              style: "long",
              type: "conjunction",
            }).format(authors.map((author) => author.data.name))}
          </div>
        )
      }
      <p class="">
        {post.data.description}
      </p>
    </div>
  </a>
</article>
