---
import type { DocsEntry } from "@/types";
import { Image } from "astro:assets";

interface Props {
  entry: DocsEntry;
}

const { entry } = Astro.props;
const { title, image, imageAlt } = entry.data;
---

<div
  class="h-full m-2 pl-0 bg-gradient-to-br gradient rounded-lg intersect:animate-fadeUp opacity-0"
>
  <div class="glass h-full rounded-lg">
    <a
      class="group hover:opacity-100"
      href={`/docs/${entry.id.replace("/-index", "")}`}
    >
      <div class="relative rounded-lg pb-9/16 overflow-hidden">
        {
          image && (
            <Image
              class="absolute object-cover w-full h-full group-hover:scale-[105%] transition-all duration-300"
              src={image}
              alt={imageAlt}
              width={1280}
              height={720}
              loading="eager"
            />
          )
        }
        <div
          class="glass-t absolute text-center rounded-lg px-2 py-1 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]"
        >
          <h4 class="">
            {title}
          </h4>
        </div>
      </div>
    </a>
  </div>
</div>