---
import FormattedDate from "@components/FormattedDate.astro";

type Props = {
  collection: any;
};

const { collection } = Astro.props;
---

<li>
  <a
    class="group hover:bg-tertiary/30 bg-none"
    href={`/${collection.collection}/${collection.slug}`}
  >
    <article class="flex flex-col">
      <div class="flex flex-col justify-between md:flex-row md:items-center">
        <h3 class="text-secondary mb-1 text-lg font-semibold text-nowrap">
          {collection.data.title}
        </h3>
        <FormattedDate
          date={collection.data.date}
          className="text-tertiary block text-nowrap"
        />
      </div>
      <p class="text-tertiary text-pretty">{collection.data.description}</p>
    </article>
  </a>
</li>
