import { HiddenInputLabel } from './HiddenInputLabel';
import { RadioDot } from './RadioDot';

function RadioInlineOption( { name, option, checked, onChange, disabled } ) {
	return (
		<HiddenInputLabel
			type="radio"
			name={ name }
			checked={ checked }
			disabled={ disabled }
			onChange={ () => onChange( option.value ) }
			labelClassName="flex items-center gap-2 text-sm text-gray-700"
		>
			<RadioDot checked={ checked } />
			{ option.label }
		</HiddenInputLabel>
	);
}

export function RadioInline( { name, options, value, onChange, disabled } ) {
	return (
		<div className="flex items-center gap-6">
			{ options.map( ( option ) => (
				<RadioInlineOption
					key={ option.value }
					name={ name }
					option={ option }
					checked={ value === option.value }
					onChange={ onChange }
					disabled={ disabled }
				/>
			) ) }
		</div>
	);
}