ListDivided list

---
/**
 * ListDivided
 * Definitielijst (label : waarde) met horizontale scheidslijn per rij. Handig voor specs, resultaten of kenmerken.
 *
 * Props:
 * - rows?: Array<{ label: string; value: string }>
 */
interface Props {
  rows?: { label: string; value: string }[];
}

const {
  rows = [
    { label: 'Kanaal', value: 'Google Search Ads' },
    { label: 'Budget', value: '€2.500 / maand' },
    { label: 'ROAS', value: '4,2x' },
    { label: 'Looptijd', value: '6 maanden' },
    { label: 'Resultaat', value: '+180% omzet' },
  ],
} = Astro.props;
---

<section class="bl-section lst-div-section">
  <div class="bl-inner bl-inner--narrow">
    <dl class="lst-div">
      {rows.map(row => (
        <div class="lst-div__row">
          <dt class="lst-div__left">{row.label}</dt>
          <dd class="lst-div__right">{row.value}</dd>
        </div>
      ))}
    </dl>
  </div>
</section>

<style>
.lst-div{margin:0;padding:0}
.lst-div__row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid #f0f0f0}
.lst-div__row:last-child{border-bottom:none}
.lst-div__left{font-size:.9rem;color:var(--color-muted, #666);font-weight:500}
.lst-div__right{font-size:.95rem;font-weight:700;color:var(--color-primary, #0a0a0a);margin:0}
</style>