---
import FormattedDate from "@components/FormattedDate.astro";
import type { CollectionEntry } from "astro:content";
import { Icon } from "astro-icon/components";

type Props = {
  collection: CollectionEntry<"posts" | "projects">;
};

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>
        <div class="text-tertiary flex items-center gap-2">
          <Icon name="mdi:calendar" />
          <FormattedDate date={collection.data.date} />
        </div>
      </div>
      <p class="text-tertiary text-pretty">{collection.data.description}</p>
    </article>
  </a>
</li>