---
type Item = {
  title: string;
  description: string;
  href: string;
  icon?: string;
};

type Props = {
  items: Item[];
  label?: string;
  heading?: string;
};

const { items, label = "Related pages", heading } = Astro.props;
---

{heading && <h2 class="card-grid-heading">{heading}</h2>}
<div class="card-grid" aria-label={label}>
  {items.map((item) => (
    <article class="link-card">
      {item.icon && <img class="card-icon" src={item.icon} alt="" aria-hidden="true" width="48" height="48" loading="lazy" />}
      <h3><a href={item.href}>{item.title}</a></h3>
      <p>{item.description}</p>
      <a class="card-action" href={item.href}>Learn more</a>
    </article>
  ))}
</div>
