import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';

class Radio extends Component {
  static propTypes = {
    label: PropTypes.node,
    sublabel: PropTypes.node,
    variant: PropTypes.oneOf(['dark', 'light']),
    className: PropTypes.string,
  };
  static defaultProps = {
    label: null,
    sublabel: null,
    className: null,
    variant: 'dark',
  };

  render() {
    const { label, sublabel, variant, className, ...rest } = this.props;
    const componentClassName = classnames('Radio', className, {
      [`Radio--${variant}`]: variant,
    });

    return (
      <label className={componentClassName}>
        <input className="Radio-radioElement" type="radio" {...rest} />
        <svg viewBox="0 0 24 24">
          <circle className="d-background" fill="none" cx="12" cy="12" r="10" strokeWidth="1" />
          <circle className="d-check" strokeWidth="3" stroke="none" cx="12" cy="12" r="4" fill="none" />
        </svg>
        <span className="Radio-label">
          {label && <span className="Radio-labelText">{label}</span>}
          {sublabel && <span className="Radio-sublabelText">{sublabel}</span>}
        </span>
      </label>
    );
  }
}

export default Radio;