---
interface Props {
  id: string;
  title: string;
  description?: string;
  content?: string;
  image?: string;
  date?: string;
}

const { id, title, description, content, image, date } = Astro.props;
---

<div class="grid grid-cols-12 p-4 duration-200 pace-x-5 space-y-4">
  <div class="col-span-4 overflow-hidden h-96">
    <img
      src={image}
      class="object-cover object-center shadow-md shadow-neutral-500"
    />
  </div>
  <div class="col-span-8 flex flex-col px-4 items-end">
    <a class="w-full" href=`/actividades/actividad?nota=${id}`>
      <h2 class="text-2xl font-bold text-justify">{title}</h2>
    </a>
    <div class="w-full">
      <p class="text-xl font-semibold text-justify" set:html={description} />
    </div>
    <div class="w-full h-full text-justify">
      <strong>{date}</strong>
    </div>
    <div
      class="p-3 bg-yellow-950 font-bold text-white rounded-md cursor-pointer"
    >
      Comentarios
    </div>
  </div>
</div>
