IconRow icon

---
interface IconRowItem {
  icon: string;
  label: string;
  sublabel?: string;
}

interface Props {
  items?: IconRowItem[];
  title?: string;
  centered?: boolean;
}

const {
  items = [
    { icon: '🏆', label: 'Bureau van het jaar', sublabel: '2024' },
    { icon: '👥', label: 'Tevreden klanten', sublabel: '80+' },
    { icon: '📈', label: 'Gem. ROAS', sublabel: '4.2x' },
    { icon: '⭐', label: 'Google rating', sublabel: '4.9/5' },
    { icon: '🚀', label: 'Projecten', sublabel: '300+' },
  ],
  title = '',
  centered = false,
} = Astro.props;
---

<div class:list={['irow', centered && 'irow--centered']}>
  {title && <h3 class="irow__title">{title}</h3>}
  <div class="irow__items">
    {items.map((item, i) => (
      <>
        <div class="irow__item">
          <span class="irow__icon" aria-hidden="true">{item.icon}</span>
          <div class="irow__text">
            {item.sublabel && <p class="irow__sublabel">{item.sublabel}</p>}
            <p class="irow__label">{item.label}</p>
          </div>
        </div>
        {i < items.length - 1 && <span class="irow__sep" aria-hidden="true">·</span>}
      </>
    ))}
  </div>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .irow { padding: 1rem 0; }
  .irow--centered .irow__items { justify-content: center; }
  .irow__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 1.25rem;
  }
  .irow__items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
  }
  .irow__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .irow__icon { font-size: 1.4rem; }
  .irow__text { display: flex; flex-direction: column; }
  .irow__sublabel {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-primary, #0a0a0a);
    margin: 0;
    line-height: 1;
  }
  .irow__label {
    font-size: 0.75rem;
    color: #888;
    margin: 0;
    font-weight: 500;
  }
  .irow__sep {
    color: #ddd;
    font-size: 1.5rem;
    line-height: 1;
    user-select: none;
  }
  @media (max-width: 640px) {
    .irow__sep { display: none; }
    .irow__items { gap: 1rem; }
  }
</style>