---
import { Image } from "astro:assets";
import type { CollectionEntry } from "astro:content";

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-square object-cover transition-all duration-300 ease-in-out group-hover:brightness-50"
          fit="cover"
        />
      </div>
      <div
        class="relative opacity-100 transition-all delay-100 duration-300 ease-in-out group-hover:opacity-100 md:opacity-0"
      >
        <p
          class="bg-primary/50 absolute right-5 bottom-5 rounded-sm px-1 py-0.5 font-medium text-white md:bg-transparent"
        >
          {
            collection.data.collection ? (
              <span>
                {collection.data.title}{" "}
                <span class="font-light">(Collection)</span>
              </span>
            ) : (
              <span>{collection.data.title}</span>
            )
          }
        </p>
      </div>
      {
        collection.data.highlight ? (
          <div class="relative transition-all duration-150 ease-in-out group-hover:opacity-0">
            <div class="absolute bottom-5 left-5 flex w-fit items-center gap-0.5 rounded-full p-1 transition-transform duration-300 hover:scale-102 hover:-rotate-2">
              <span class="mr-1 h-1.5 w-1.5 rounded-full bg-green-600 dark:bg-green-400" />
              <p class="font-medium text-white">New</p>
            </div>
          </div>
        ) : null
      }
    </a>
  </article>
</li>
