const { h, matter } = globalThis.ami

export function Radio ({ field }) {
  const label = field.required === '1' ? `${field.label} *` : field.label
  let id = 1

  return h('fieldset', { className: 'block space-y-1' },
    h('legend', { className: 'block font-bold' }, label),
    field.options.map(option =>
      h('label', { className: 'space-x-2 flex items-center cursor-pointer' },
        h(matter.Input, {
          ...field.attrs,
          id: `${field.attrs.id}_${id++}`,
          type: 'radio',
          value: option.value,
          checked: field.attrs.value === option.value ? true : null,
          'data-label': field.label
        }),
        h('span', option.label)
      )
    ),
    field.description && h('span', { className: 'text-sm' }, field.description)
  )
}
