---
/**
 * ChoiceGroup — a question with checkbox or radio answers, inside a fieldset.
 * type: 'checkbox' (more than one answer) | 'radio' (exactly one; needs name).
 * options: { label, value?, checked? }[]
 */
interface Choice { label: string; value?: string; checked?: boolean }
interface Props { legend: string; hint?: string; type?: 'checkbox' | 'radio'; name?: string; options: Choice[] }
const { legend, hint, type = 'checkbox', name, options } = Astro.props;
---
<fieldset class="cp-field">
  <legend set:html={legend + (hint ? `<span>${hint}</span>` : '')} />
  <div class="cp-choices">
    {options.map((o) => <label class="cp-choice"><input type={type} name={name} value={o.value} checked={o.checked}><span set:html={o.label} /></label>)}
  </div>
</fieldset>