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

import './header-brand.scss'; // eslint-disable-line no-unused-vars

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

  static defaultProps = {
    name: null,
    color: null,
    className: ''
  }

  render() {
    const { name, className, color, ...rest } = this.props;
    const style = color ? { color } : {};
    return (
      <div styleName="container" className={className} {...rest}>
        <div styleName="logo" />
        <span styleName="name" style={style}><span>sigfox</span>{name}</span>
      </div>
    );
  }
}


export default SigfoxBrand;
