import { createElement } from '__RAX_OR_REACT__';
import { string, any, bool, func } from 'prop-types';

function Radio(props) {
  const { value, label, checked, onChange, name } = props;

  function handleChange() {
    onChange && onChange(value);
  }

  const id = [name, value, parseInt(Math.random() * 1000)].join('-');

  let className = 'radio-item';

  if (checked) {
    className += ' radio-item-checked';
  }

  return (
    <div className={className}>
      <div className='radio-item-input'>
        <input
          type='radio'
          id={id}
          name={name}
          value={value}
          checked={checked}
          date-checked={checked}
          onChange={handleChange}
        />
      </div>
      <label htmlFor={id}>{label}</label>
    </div>
  );
}

Radio.propTypes = {
  name: string,
  id: string,
  value: any,
  label: string,
  checked: bool,
  onChange: func,
};

export default Radio;