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 HeaderBrand extends PureComponent {
  static propTypes = {
    /** The name of your app to display next to the logo */
    name: PropTypes.string,
    /** small / square version of the app logo displayed instead of the full logo on mobile resolution */
    logoSmall: PropTypes.string,
    /** Full logo to be displayed on desktop resolutions. If null, logoSmall will be used */
    logoFull: PropTypes.string,
    /** @ignore */
    className: PropTypes.string
  }

  static defaultProps = {
    name: null,
    logoSmall: null,
    logoFull: null,
    className: undefined
  }

  render() {
    const { name, logoSmall, logoFull, className } = this.props;
    return (
      <div styleName="container" className={className}>
        {logoSmall && <img styleName="logo-small" src={logoSmall} alt="logo" />}
        {(logoFull || logoSmall) && <img styleName="logo-full" src={logoFull || logoSmall} alt="logo" />}
        {name && <span styleName="name">{name}</span>}
      </div>
    );
  }
}


export default HeaderBrand;
