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

type Props = {
  collection: any;
};

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

<li>
  <a
    class="group bg-none hover:bg-tertiary/30"
    href={`/${collection.collection}/${collection.slug}`}
  >
    <article class="flex flex-col">
      <h3 class="mb-1 text-balance font-semibold">
        <span class="text-secondary">{collection.data.title}</span><span
          class="ml-2 text-tertiary transition-colors group-hover:text-accent"
          >{collection.data.description}</span
        >
      </h3>
      <time class="block text-sm text-accent"
        ><FormattedDate date={collection.data.date} /></time
      >
    </article>
  </a>
</li>