---
import pb from "../lib/pb";

const { href, title, body, image } = Astro.props;
let imageURL;

if (image) {
  imageURL = pb.files.getUrl(image, image.file);
}
---

<div class="relative max-w-xl mx-auto mt-20 h-32 w-64">
  <a href={href} class="block">
    {
      image && (
        <img
          class="h-32 w-64 object-cover rounded-md"
          src={imageURL}
          alt={`Cover for ${title}`}
        />
      )
    }

    <div class="absolute inset-0 bg-gray-700 opacity-60 rounded-md"></div>
    <div class="absolute inset-0 inline-flex flex-col items-center justify-center">
      <h2 class="text-white text-3xl font-bold">{title}</h2>
      <span class="text-white">{body}</span>
    </div>
  </a>
</div>