ListFilter list

---
/**
 * ListFilter
 * Pill-stijl filterknopjes (radio-buttons) voor categorie-selectie.
 *
 * Props:
 * - name?: string                    unieke naam voor de radio-group
 * - options?: Array<{ value: string; label: string; checked?: boolean }>
 */
interface Props {
  name?: string;
  options?: { value: string; label: string; checked?: boolean }[];
}

const {
  name = 'lst-filter',
  options = [
    { value: 'alle', label: 'Alles', checked: true },
    { value: 'ads', label: 'Advertenties' },
    { value: 'seo', label: 'SEO' },
    { value: 'social', label: 'Social' },
    { value: 'content', label: 'Content' },
  ],
} = Astro.props;
---

<section class="bl-section lst-fil-section">
  <div class="bl-inner">
    <div class="lst-fil">
      {options.map(opt => (
        <label class="lst-fil__option">
          <input type="radio" name={name} value={opt.value} class="lst-fil__radio" checked={opt.checked} />
          <span class="lst-fil__label">{opt.label}</span>
        </label>
      ))}
    </div>
  </div>
</section>

<style>
.lst-fil{display:flex;flex-wrap:wrap;gap:.5rem}
.lst-fil__radio{display:none}
.lst-fil__label{display:inline-block;padding:.4rem .9rem;border-radius:999px;font-size:.9rem;font-weight:600;border:1.5px solid #e0e0e0;color:var(--color-muted, #555);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.lst-fil__label:hover{border-color:var(--color-accent, #6366f1);color:var(--color-accent, #6366f1)}
.lst-fil__radio:checked+.lst-fil__label{background:var(--color-accent, #6366f1);border-color:var(--color-accent, #6366f1);color:#fff}
</style>