import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import SigfoxBrand from '../SigfoxBrand';
import Icon from '../Icon';
import Background from '../Background';

import './sigfox-logo-id-side.scss'; // eslint-disable-line no-unused-vars

/**
 * Brand / Logo bloc, to be used inside of the MainHeader
 */
class SigfoxLogoIdSide extends PureComponent {
  static propTypes = {
    /** The name of your app to display under "sigfox" */
    name: PropTypes.string,
    className: PropTypes.string
  };

  static defaultProps = {
    name: null,
    className: undefined
  };

  render() {
    const { name, className, ...rest } = this.props;
    return (
      <Background borderColor="medium-light-grey" styleName="base" className={className} {...rest}>
        <div styleName="logos-wrapper">
          <SigfoxBrand styleName="sigfox-logo" name={name} />
          <Background borderColor="medium-light-grey" styleName="content-sigfox-id">
            <Icon styleName="sigfox-id" name="sigfox-id" size="md" />
          </Background>
        </div>
      </Background>
    );
  }
}


export default SigfoxLogoIdSide;
