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

class Checkbox 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('Checkbox', className, {
      [`Checkbox--${variant}`]: variant,
    });
    return (
      <label className={componentClassName}>
        <input className="Checkbox-checkboxElement" type="checkbox" {...rest} />
        <span className="Checkbox-label">
          {label && <span className="Checkbox-labelText">{label}</span>}
          {sublabel && <span className="Checkbox-sublabelText">{sublabel}</span>}
        </span>
      </label>
    );
  }
}

export default Checkbox;