---
import { Image } from "astro:assets";
import FormattedDate from "@components/FormattedDate.astro";

type Props = {
  collection: any;
};

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

<li>
  <article class="flex-col overflow-clip">
    <a href={`/${collection.collection}/${collection.slug}`} class="group">
      <div class="overflow-hidden rounded-md">
        <Image
          src={collection.data.image.url}
          alt={collection.data.image.alt}
          title={collection.data.title}
          loading="eager"
          class="aspect-square object-cover transition-transform duration-300 ease-in-out group-hover:scale-102"
          fit="cover"
        />
      </div>
      <article class="flex flex-col">
        <h3 class="mb-1 font-semibold text-balance">
          <span class="text-secondary">{collection.data.title}</span><span
            class="text-tertiary group-hover:text-accent ml-2 transition-colors"
            >{collection.data.description}</span
          >
        </h3>
        <time class="text-accent block text-sm"
          ><time>
            <FormattedDate date={collection.data.date} />
          </time></time
        >
      </article>
    </a>
  </article>
</li>
