ListPros list

---
/**
 * ListPros
 * Voor/nadelen-vergelijking in twee kolommen. Optioneel met kopjes boven elke kolom.
 *
 * Props:
 * - pros: string[]                         voordelen
 * - cons: string[]                         nadelen
 * - prosLabel?: string                     kop boven pros-kolom (default 'Voordelen')
 * - consLabel?: string                     kop boven cons-kolom (default 'Nadelen')
 * - theme?: 'light' | 'dark'              default 'light'
 */
interface Props {
  pros: string[];
  cons: string[];
  prosLabel?: string;
  consLabel?: string;
  theme?: 'light' | 'dark';
}

const {
  pros,
  cons,
  prosLabel = 'Voordelen',
  consLabel = 'Nadelen',
  theme = 'light',
} = Astro.props;
---

<section class:list={['bl-section', 'lst-pros-section', `lst-pros-section--${theme}`]}>
  <div class="bl-inner">
    <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(item => (
            <li class="lst-pros__item lst-pros__item--pro">
              <span aria-hidden="true" class="lst-pros__icon">&#10003;</span>
              <span>{item}</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(item => (
            <li class="lst-pros__item lst-pros__item--con">
              <span aria-hidden="true" class="lst-pros__icon">&#10005;</span>
              <span>{item}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  </div>
</section>

<style>
.lst-pros-section--dark { background: #0a0a0a; }

.lst-pros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 600px) {
  .lst-pros { grid-template-columns: 1fr; }
}

.lst-pros__col {
  border-radius: .75rem;
  padding: 1.5rem;
}

.lst-pros__col--pro {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.lst-pros__col--con {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.lst-pros-section--dark .lst-pros__col--pro {
  background: #052e16;
  border-color: #166534;
}

.lst-pros-section--dark .lst-pros__col--con {
  background: #2d0a0a;
  border-color: #991b1b;
}

.lst-pros__label {
  margin: 0 0 .875rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.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: .625rem;
}

.lst-pros__item {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: 1rem;
  line-height: 1.5;
}

.lst-pros__item--pro { color: #166534; }
.lst-pros__item--con { color: #991b1b; }

.lst-pros-section--dark .lst-pros__item--pro { color: #86efac; }
.lst-pros-section--dark .lst-pros__item--con { color: #fca5a5; }

.lst-pros__icon {
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.5;
}
</style>