ListPros list

---
interface Props {
  pros: string[];
  cons: string[];
  prosLabel?: string;
  consLabel?: string;
}
const { pros = ["Directe zichtbaarheid", "Meetbaar resultaat", "Flexibel budget", "Snelle start"], cons = ["Kost geld per klik", "Stopt bij budget stop", "Leercurve vereist"], prosLabel = "Voordelen", consLabel = "Nadelen" } = Astro.props;
---

<div class="lst-pros">
  <div class="lst-pros__col lst-pros__col--pro">
    <p class="lst-pros__label">{prosLabel}</p>
    <ul class="lst-pros__list">
      {pros.map(p => (
        <li class="lst-pros__item lst-pros__item--pro">
          <span aria-hidden="true">✓</span>
          <span>{p}</span>
        </li>
      ))}
    </ul>
  </div>
  <div class="lst-pros__col lst-pros__col--con">
    <p class="lst-pros__label">{consLabel}</p>
    <ul class="lst-pros__list">
      {cons.map(c => (
        <li class="lst-pros__item lst-pros__item--con">
          <span aria-hidden="true">✗</span>
          <span>{c}</span>
        </li>
      ))}
    </ul>
  </div>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .lst-pros {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  @media (max-width: 480px) { .lst-pros { grid-template-columns: 1fr; } }
  .lst-pros__col {
    border-radius: 0.75rem;
    padding: 1.25rem;
  }
  .lst-pros__col--pro { background: #f0fdf4; border: 1px solid #bbf7d0; }
  .lst-pros__col--con { background: #fef2f2; border: 1px solid #fecaca; }
  .lst-pros__label {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .lst-pros__col--pro .lst-pros__label { color: #16a34a; }
  .lst-pros__col--con .lst-pros__label { color: #dc2626; }
  .lst-pros__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .lst-pros__item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
  }
  .lst-pros__item--pro { color: #166534; }
  .lst-pros__item--con { color: #991b1b; }
  .lst-pros__item span:first-child { font-weight: 700; flex-shrink: 0; }
</style>