ListPrice list

---
interface Props {
  items: Array<{ text: string; included: boolean }>;
}
const { items = [
  { text: "Campagne setup & structuur", included: true },
  { text: "Maandelijkse optimalisatie", included: true },
  { text: "Wekelijkse rapportage", included: true },
  { text: "Dedicated accountmanager", included: true },
  { text: "Landing page ontwerp", included: false },
  { text: "Content creatie", included: false },
] } = Astro.props;
---

<ul class="lst-price">
  {items.map(item => (
    <li class={`lst-price__item ${item.included ? '' : 'lst-price__item--off'}`}>
      <span class="lst-price__icon" aria-hidden="true">
        {item.included
          ? <svg width="18" height="18" viewBox="0 0 18 18"><circle cx="9" cy="9" r="9" fill="#6366f1"/><path d="M5 9l3 3 5-5.5" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
          : <svg width="18" height="18" viewBox="0 0 18 18"><circle cx="9" cy="9" r="9" fill="#e5e5e5"/><path d="M6 12l6-6M12 12L6 6" stroke="#aaa" stroke-width="1.8" stroke-linecap="round"/></svg>
        }
      </span>
      <span class="lst-price__text">{item.text}</span>
    </li>
  ))}
</ul>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .lst-price {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .lst-price__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.95rem;
    color: var(--color-primary);
  }
  .lst-price__item--off .lst-price__text {
    color: #aaa;
    text-decoration: line-through;
  }
  .lst-price__icon { display: flex; flex-shrink: 0; }
</style>