text: import React from 'react';
  import Checkbox from 'coral-ui/components/Checkbox';
  import PropTypes from 'prop-types';
  import cn from 'classnames';
  import styles from './StreamConfiguration.css';
  import uuid from 'uuid/v4';
  
  class Configuration extends React.Component {
    id = uuid();
  
    render() {
      const {
        title,
        description,
        children,
        className,
        onCheckbox,
        checked,
        ...rest
      } = this.props;
      return (
        <div {...rest} className={cn(styles.root, className)}>
          {checked !== undefined && (
            <div className={styles.action}>
              <Checkbox
                id={this.id}
                className={styles.checkbox}
                onChange={onCheckbox}
                checked={checked}
              />
            </div>
          )}
          <div
            className={cn(styles.wrapper, {
              [styles.content]: checked !== undefined,
            })}
          >
            <label htmlFor={this.id} className={styles.title}>
              {title}
            </label>
            <div className={styles.description}>{description}</div>
            <div>{children}</div>
          </div>
        </div>
      );
    }
  }
  
  Configuration.propTypes = {
    title: PropTypes.string.isRequired,
    description: PropTypes.string,
    className: PropTypes.string,
    onCheckbox: PropTypes.func,
    checked: PropTypes.bool,
    children: PropTypes.node,
  };
  
  export default Configuration;
  