IconInline icon

---
/**
 * IconInline
 * Inline icoon-badges in een wrappende flex-layout
 */
interface InlineItem {
  icon: string;
  label: string;
  color?: string;
}
interface Props {
  items?: InlineItem[];
}
const { items = [
  { icon: '🎯', label: 'Strategie', color: '#6366f1' },
  { icon: '📈', label: 'Groei', color: '#10b981' },
  { icon: '💡', label: 'Ideeën', color: '#f59e0b' },
  { icon: '🚀', label: 'Lancering', color: '#ec4899' },
  { icon: '📊', label: 'Data', color: '#3b82f6' },
  { icon: '🤝', label: 'Samenwerking', color: '#8b5cf6' },
  { icon: '✍️', label: 'Content', color: '#ef4444' },
  { icon: '🔍', label: 'SEO', color: '#14b8a6' },
  { icon: '📱', label: 'Social', color: '#f97316' },
] } = Astro.props;
---

<div class="iinl-wrap">
  {items.map(item => (
    <span class="iinl-badge" style={`--badge-color: ${item.color ?? '#6366f1'}`}>
      <span class="iinl-icon">{item.icon}</span>
      <span class="iinl-label">{item.label}</span>
    </span>
  ))}
</div>

<style>
  .iinl-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 24px;
    font-family: system-ui, sans-serif;
  }
  .iinl-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--badge-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--badge-color) 30%, transparent);
    transition: transform 0.15s, opacity 0.15s;
  }
  .iinl-badge:hover {
    transform: scale(1.05);
    opacity: 0.85;
  }
  .iinl-icon { font-size: 0.95rem; }
  .iinl-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--badge-color);
    white-space: nowrap;
  }
</style>