IconBadge icon

---
interface Badge {
  icon?: string;
  label: string;
  variant?: 'default' | 'accent' | 'success' | 'warning' | 'outline';
}

interface Props {
  badges?: Badge[];
  title?: string;
}

const {
  badges = [
    { icon: '🏆', label: 'Bureau van het jaar', variant: 'accent' },
    { icon: '✅', label: 'Google Partner', variant: 'success' },
    { icon: '⭐', label: '4.9 rating', variant: 'default' },
    { icon: '🇳🇱', label: 'Nederlands bureau', variant: 'outline' },
    { icon: '🔒', label: 'ISO gecertificeerd', variant: 'default' },
    { icon: '📱', label: 'Meta Business Partner', variant: 'default' },
  ],
  title = 'Onze certificeringen',
} = Astro.props;
---

<div class="ibdg">
  {title && <p class="ibdg__title">{title}</p>}
  <div class="ibdg__list">
    {badges.map((b) => (
      <span class:list={['ibdg__badge', `ibdg__badge--${b.variant ?? 'default'}`]}>
        {b.icon && <span class="ibdg__icon" aria-hidden="true">{b.icon}</span>}
        {b.label}
      </span>
    ))}
  </div>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .ibdg__title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
    margin: 0 0 0.75rem;
  }
  .ibdg__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .ibdg__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .ibdg__badge--default { background: #f0f0f0; color: #444; }
  .ibdg__badge--accent { background: rgba(99,102,241,0.12); color: var(--color-accent, #6366f1); border: 1px solid rgba(99,102,241,0.25); }
  .ibdg__badge--success { background: rgba(22,163,74,0.1); color: #16a34a; border: 1px solid rgba(22,163,74,0.2); }
  .ibdg__badge--warning { background: rgba(234,179,8,0.1); color: #a16207; border: 1px solid rgba(234,179,8,0.25); }
  .ibdg__badge--outline { background: transparent; color: #666; border: 1px solid #ddd; }
  .ibdg__icon { font-size: 0.9rem; }
</style>