ListIcons list

---
/**
 * ListIcons
 * Verticale lijst met icoon (tekst/emoji) per item. Compact voordelen- of feature-blok.
 *
 * Props:
 * - items?: Array<{ icon?: string; text: string }>
 */
interface Props {
  items?: { icon?: string; text: string }[];
}

const {
  items = [
    { icon: '→', text: 'Doelgerichte campagnes' },
    { icon: '→', text: 'Inzichtelijke rapportages' },
    { icon: '→', text: 'Snelle resultaten' },
    { icon: '→', text: 'Persoonlijk contact' },
    { icon: '→', text: 'Creatieve oplossingen' },
  ],
} = Astro.props;
---

<section class="bl-section lst-ico-section">
  <div class="bl-inner bl-inner--narrow">
    <ul class="lst-ico">
      {items.map(item => (
        <li class="lst-ico__item">
          <span class="lst-ico__icon" aria-hidden="true">{item.icon ?? '→'}</span>
          <span class="lst-ico__text">{item.text}</span>
        </li>
      ))}
    </ul>
  </div>
</section>

<style>
.lst-ico{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.lst-ico__item{display:flex;align-items:center;gap:.85rem}
.lst-ico__icon{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;color:var(--color-accent, #6366f1)}
.lst-ico__text{font-size:1rem;color:var(--color-primary, #0a0a0a);font-weight:500}
</style>