IconRow icon

---
/**
 * IconRow
 * Horizontale rij met statistieken/onderscheidingen: icoon, grote waarde, sublabel.
 * Geschikt als compacte social-proof balk.
 *
 * Props:
 * - title?: string
 * - items: { icon?: string; value: string; label: string }[]
 * - centered?: boolean     default false
 * - theme?: 'light' | 'dark'   default 'light'
 */
interface Props {
  title?: string;
  items: { icon?: string; value: string; label: string }[];
  centered?: boolean;
  theme?: 'light' | 'dark';
}

const { title, items, centered = false, theme = 'light' } = Astro.props;
---

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

<style>
  .irow--light { background: var(--color-bg, #fff); }
  .irow--dark { background: #0a0a0a; }

  .irow__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 1.25rem;
  }
  .irow--dark .irow__title { color: #e8e8e8; }

  .irow__items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
  }
  .irow__items--centered { justify-content: center; }

  .irow__item {
    display: flex;
    align-items: center;
    gap: .6rem;
  }

  .irow__icon { font-size: 1.4rem; }

  .irow__text {
    display: flex;
    flex-direction: column;
  }

  .irow__value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-primary, #0a0a0a);
    margin: 0;
    line-height: 1;
  }
  .irow--dark .irow__value { color: #e8e8e8; }

  .irow__label {
    font-size: .8125rem;
    color: #888;
    margin: 0;
    font-weight: 500;
  }
  .irow--dark .irow__label { color: #999; }

  .irow__sep {
    color: #ddd;
    font-size: 1.5rem;
    line-height: 1;
    user-select: none;
  }
  .irow--dark .irow__sep { color: #444; }

  @media (max-width: 480px) {
    .irow__sep { display: none; }
  }
</style>