---
export interface Props {
  items: {
    slug: string;
    title: string;
    description?: string;
    badge?: string;
    badgeClass?: string;
    meta?: string;
  }[];
}
const { items } = Astro.props;
---
{items.length > 0 && <div class="card-grid">
  {items.map((it) => (
    <a href={`/${it.slug}/`} class="card">
      {it.badge && <div style="margin-bottom:8px;"><span class="badge ${it.badgeClass || ''}">${it.badge}</span></div>}
      <h3>{it.title}</h3>
      {it.description && <p>{it.description}</p>}
      {it.meta && <p style="font-size:12px;color:var(--muted);">{it.meta}</p>}
    </a>
  ))}
</div>}