import type { Modulo } from '../data/modulos'

interface Props {
  modulo: Modulo
}

/** Tarjeta de acceso a un módulo del ecosistema */
export function TarjetaModulo({ modulo }: Props) {
  return (
    <li>
      <a
        href={modulo.url}
        className="group flex h-full flex-col border border-neutral-200 bg-white p-8 transition-colors duration-150 hover:border-neutral-900"
      >
        <h2 className="text-2xl font-light text-neutral-900">{modulo.nombre}</h2>
        <p className="mt-3 text-sm leading-relaxed text-neutral-500">{modulo.descripcion}</p>
        <span className="mt-auto pt-8 text-xs font-bold tracking-widest text-accent uppercase">
          Entrar <span aria-hidden="true">&rarr;</span>
        </span>
      </a>
    </li>
  )
}