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

type Props = {
  collection: any;
};

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

<li>
  <article
    class="group relative isolate mx-auto flex h-full w-full flex-col justify-end overflow-hidden rounded-lg px-8 pb-8 pt-40"
  >
    <Image
      src={collection.data.image.url}
      alt={collection.data.image.alt}
      title={collection.data.title}
      loading="eager"
      class="absolute inset-0 h-full w-full object-cover duration-300 ease-in-out group-hover:scale-105"
      fit="cover"
    />
    <div
      class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"
    >
    </div>
    <a
      class="absolute inset-0 z-20"
      href={`/${collection.collection}/${collection.slug}`}
      aria-label={collection.data.title}></a>
    <h3
      class="z-10 mt-3 w-fit text-xl font-semibold text-primary dark:text-secondary"
    >
      {collection.data.title}
    </h3>
    <div
      class="z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 text-accent"
    >
      {
        collection.data.collection ? (
          <span>
            <FormattedDate date={collection.data.date} /> &bull; Collection
          </span>
        ) : (
          <FormattedDate date={collection.data.date} />
        )
      }
    </div>
  </article>
</li>