ListChecklist list

---
interface Props {
  title?: string;
  items: string[];
}
const { title, items = ["Gratis strategiegesprek", "Persoonlijk marketingplan", "Geen verborgen kosten", "Maandelijks opzegbaar"] } = Astro.props;
---

<div class="lst-check">
  {title && <p class="lst-check__title">{title}</p>}
  <ul class="lst-check__list">
    {items.map(item => (
      <li class="lst-check__item">
        <span class="lst-check__icon" aria-hidden="true">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#6366f1"/><path d="M4.5 8l2.5 2.5 4.5-5" stroke="#fff" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </span>
        <span>{item}</span>
      </li>
    ))}
  </ul>
</div>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .lst-check { padding: 1rem 0; }
  .lst-check__title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #888;
    margin: 0 0 0.75rem;
  }
  .lst-check__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .lst-check__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1rem;
    color: var(--color-primary);
  }
  .lst-check__icon { flex-shrink: 0; display: flex; }
</style>