IconFlat icon

---
/**
 * IconFlat
 * Platte horizontale icoonsrij met korte labels
 */
interface FlatItem {
  icon: string;
  label: string;
}
interface Props {
  items?: FlatItem[];
}
const { items = [
  { icon: '🎯', label: 'Strategie' },
  { icon: '✍️', label: 'Content' },
  { icon: '📊', label: 'Analyse' },
  { icon: '📢', label: 'Ads' },
  { icon: '🔗', label: 'SEO' },
  { icon: '💌', label: 'E-mail' },
  { icon: '📱', label: 'Social' },
  { icon: '🎨', label: 'Design' },
] } = Astro.props;
---

<div class="iflat-row">
  {items.map(item => (
    <div class="iflat-item">
      <span class="iflat-icon">{item.icon}</span>
      <span class="iflat-label">{item.label}</span>
    </div>
  ))}
</div>

<style>
  .iflat-row {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    font-family: system-ui, sans-serif;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
  }
  .iflat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    border-right: 1px solid #e5e7eb;
    flex: 1 1 auto;
    justify-content: center;
    transition: background 0.15s;
  }
  .iflat-item:hover {
    background: #f5f3ff;
  }
  .iflat-item:last-child { border-right: none; }
  .iflat-icon { font-size: 1.2rem; }
  .iflat-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
  }
</style>