import React from 'react';
import classNames from 'classnames';

import '../base';
import style from './NavigationUserInfo.styl';

import Avatar from '../atoms/Avatar';
import MediaQuery from '../atoms/MediaQuery';

export default function NavigationUserInfo({ name, src, label, onClick, noMargin, ...props }) {

  const wrapperClasses = classNames({
    [style.wrapper]: true,
    [style.noMargin]: noMargin
  });

  const labelClasses = classNames({
    [style.label]: true
  });

  return (
    <div className={wrapperClasses} onClick={onClick}>
      <Avatar src={src} name={name} nav style={{ zIndex: 2, cursor: 'pointer' }} />
      <MediaQuery small>
        {
          label && <div title={label} className={labelClasses}>{label}</div>
        }
      </MediaQuery>
    </div>
  );
}