---
import { Image } from "astro:assets";
import type { CollectionEntry } from "astro:content";
import { Icon } from "astro-icon/components";

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

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

<li>
  <article class="flex-col overflow-clip">
    <a href={`/${collection.collection}/${collection.slug}`} class="group">
      <div class="overflow-hidden rounded-sm">
        <Image
          src={collection.data.image.url}
          alt={collection.data.image.alt}
          loading="eager"
          class="aspect-[2/1] object-cover transition-all duration-300 ease-in-out group-hover:brightness-50"
          fit="cover"
        />
      </div>
      <div
        class="relative opacity-0 transition-all delay-100 duration-300 ease-in-out group-hover:opacity-100"
      >
        <p class="absolute right-5 bottom-5 font-medium text-white">
          {collection.data.title}
        </p>
      </div>
      {
        collection.data.highlight ? (
          <div class="relative transition-all duration-300 ease-in-out group-hover:opacity-0">
            <div class="absolute bottom-5 left-5 flex w-fit items-center gap-1 rounded-full bg-green-900/20 p-1 transition-transform duration-300 hover:scale-102 hover:-rotate-2">
              <Icon
                name="mdi:plus-circle-outline"
                class="h-auto w-6 rounded-full bg-green-900/70 p-0.5 text-green-400"
              />
              <p>New!</p>
            </div>
          </div>
        ) : null
      }
    </a>
  </article>
</li>
