---
interface Props {
  titulo: string;
  imagen?: string;
  datos?: string;
  color?: string;
}

const { titulo, imagen, color } = Astro.props;
---

<a
  class="w-full h-full flex flex-col p-5 space-y-4 bg-stone-50 border-2 border-stone-50 rounded-md shadow-md shadow-slate-400"
>
  {
    imagen && (
      <div class="w-full h-auto flex flex-row justify-center">
        <img class={`w-auto h-48 p-2 ${color}`} src={imagen} />
      </div>
    )
  }
  <div class="w-full">
    <h2 class="text-2xl font-bold">
      {titulo}
    </h2>
  </div>
  <hr class="my-2" />
  <slot />
</a>
