---
/**
 * Option — one approach that was considered: title, one-line description, pros and cons.
 * The default slot holds optional evidence (screenshots) between the description and the verdict.
 */
interface Props { title: string; lede: string; pros: string[]; cons: string[]; class?: string }
const { title, lede, pros, cons, class: extra } = Astro.props;
---
<div class:list={['option', extra]}>
  <h3 set:html={title} />
  <p class="option-lede" set:html={lede} />
  <slot />
  <dl class="option-verdict">
    <dt class="pc-label pro">Pros</dt>
    <dd><ul>{pros.map((t) => <li set:html={t} />)}</ul></dd>
    <dt class="pc-label con">Cons</dt>
    <dd><ul>{cons.map((t) => <li set:html={t} />)}</ul></dd>
  </dl>
</div>