---
/**
 * RADIO GROUP COMPONENT
 */
import type { Radio } from '@astro-reactive/common';

export interface Props {
	control: Radio;
}

const { control } = Astro.props;

const options = control.options.map((option) => {
	if (typeof option === 'string') {
		return {
			label: option,
			value: option,
		};
	}
	return option;
});
---

{
	options.map((option) => (
		<div class="radio-option">
			<input
				type="radio"
				name={control.name}
				value={option.value}
				checked={option.value === control.value}
			/>{' '}
			{option.label}
		</div>
	))
}