IconBadge icon

---
interface Props {
  title?: string;
  badges?: { icon?: string; label: string; variant?: 'accent' | 'success' | 'warning' | 'outline' | 'default' }[];
}

const {
  title,
  badges = [],
} = Astro.props;
---

<section class:list={['bl-section', 'ibdg-section']}>
  <div class="bl-inner">
    {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>
</section>

<style>
  .ibdg-section { background: var(--color-bg, #fff); }
  .ibdg__title {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #999;
    margin: 0 0 .75rem;
  }
  .ibdg__list { display: flex; flex-wrap: wrap; gap: .5rem; }
  .ibdg__badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .8rem;
    border-radius: 20px;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .ibdg__badge--default { background: #f0f0f0; color: #374151; }
  .ibdg__badge--accent {
    background: #6366f11f;
    color: var(--color-accent, #6366f1);
    border: 1px solid rgba(99,102,241,.25);
  }
  .ibdg__badge--success {
    background: #16a34a1a;
    color: #16a34a;
    border: 1px solid rgba(22,163,74,.2);
  }
  .ibdg__badge--warning {
    background: #eab3081a;
    color: #a16207;
    border: 1px solid rgba(234,179,8,.25);
  }
  .ibdg__badge--outline {
    background: transparent;
    color: #555;
    border: 1px solid #ddd;
  }
  .ibdg__icon { font-size: .9rem; }
</style>