---
interface Props {
  nombre: string;
  puesto?: string;
  icono?: string;
  contacto?: boolean;
}

const { nombre, puesto, icono, contacto } = Astro.props;
---

<a
  class="w-full h-full space-x-4 grid grid-cols-12 p-5 space-y-4 bg-stone-50 border-2 border-stone-50 rounded-md shadow-md shadow-slate-400"
>
  <div class="w-full h-auto flex flex-row justify-center col-span-4">
    <div class="overflow-hidden h-32 w-32 rounded-full">
      <img class="w-full h-full object-cover" src={icono} />
    </div>
  </div>
  <div class="w-full flex flex-col col-span-8">
    <h2 class="text-xl font-bold">
      {nombre}
    </h2>
    <p class="text-lg font-semibold text-gray-400">
      {puesto}
    </p>
  </div>
  <hr class="my-2 col-span-12" />
  {
    contacto && (
      <div class="flex flex-col">
        <p>
          <strong>Teléfono:</strong> 662234455
        </p>
        <p>
          <strong>Correo:</strong> correo@ejemplo.com
        </p>
      </div>
    )
  }
</a>
