---
import ExternalLink from "../links/ExternalLink.astro"
import PajamasIcon from "../icons/PajamasIcon.astro"
import type { MyLink } from "./myLinks"

interface Props extends MyLink {
  class?: string
}

const { title, message, url, icon, class: clazz } = Astro.props
const iconStyle = "w-6 h-6"
---

<ExternalLink href={url} noStyle>
  <div class:list={["card bg-cat-mantle text-cat-text", clazz]}>
    <div class="card-body p-5 flex flex-row items-center">
      {
        icon ? (
          <PajamasIcon
            name={icon.src}
            class={iconStyle}
            aria-label={icon.alt}
          />
        ) : (
          <PajamasIcon
            name={"pajamas:link"}
            class={iconStyle}
            aria-label="Link icon"
          />
        )
      }
      <div>
        <h5 class="card-title">{title}</h5>
        <p class="prose">{message}</p>
      </div>
    </div>
  </div>
</ExternalLink>