ContentBadges content

---
interface Badge {
  icon?: string;
  label: string;
  value?: string;
}

interface Props {
  heading?: string;
  badges?: Badge[];
  layout?: "row" | "grid";
}

const {
  heading = "Erkend & gecertificeerd",
  layout = "row",
  badges = [
    { icon: "🏆", label: "Google Partner", value: "Premier" },
    { icon: "🎯", label: "Meta Business Partner", value: "Gecertificeerd" },
    { icon: "⭐", label: "Google Reviews", value: "4.9/5" },
    { icon: "🔒", label: "ISO 27001", value: "Gecertificeerd" },
    { icon: "🇳🇱", label: "Bureau of het Jaar", value: "2024 Finalist" },
  ],
} = Astro.props;
---

<div class="cba-wrap">
  {heading && <h2 class="cba-heading">{heading}</h2>}
  <div class={`cba-list cba-list--${layout}`}>
    {badges.map(badge => (
      <div class="cba-badge">
        {badge.icon && <span class="cba-icon" aria-hidden="true">{badge.icon}</span>}
        <div class="cba-info">
          <span class="cba-label">{badge.label}</span>
          {badge.value && <span class="cba-value">{badge.value}</span>}
        </div>
      </div>
    ))}
  </div>
</div>

<style>
  .cba-wrap { padding: 2rem 0; }
  .cba-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 1.5rem;
  }
  .cba-list {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .cba-list--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  .cba-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    transition: box-shadow 0.2s;
  }
  .cba-badge:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  }
  .cba-icon { font-size: 1.5rem; }
  .cba-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary, #0a0a0a);
    white-space: nowrap;
  }
  .cba-value {
    display: block;
    font-size: 0.7rem;
    color: #888;
    margin-top: 0.1rem;
  }
</style>