import * as React from 'react';

import { Colors } from '../../../../models/colors';
import { radioButtonStyle } from './radioButton.style';

interface RadioButtonProps {
	label?: string;
	id?: string;
	onChange?: (event: React.ChangeEvent) => void;
	palette?: Colors;
	automationName?: string;
	gtmId?: string;
	selected?: boolean;
	required?: boolean;
	translator?: Function;
}

const RadioButton = (props: RadioButtonProps) => {
	return (
		<div className={radioButtonStyle(props.palette)}>
			<input
				data-automation={props.automationName}
				id={props.id}
				type="radio"
				data-gtm={props.gtmId}
				checked={props.selected}
				onChange={props.onChange}
				key={props.id}
				required={props.required}
				aria-required={props.required}
			/>
			<label htmlFor={props.id}>{props.translator(props.label)}</label>
		</div>
	);
};

export default RadioButton;