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

import '../base';
import styles from './NavigationWorkspaceInfo.styl';

import AppIcon from '../atoms/AppIcon';
import MediaObject from '../atoms/MediaObject';
import MediaQuery from '../atoms/MediaQuery';

export default function NavigationUserInfo({ name, label, style, clickable, onClick, ...props }) {

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

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

  const nameClasses = classNames({
    [styles.name]: true
  });

  return (
    <div className={wrapperClasses} style={style} onClick={onClick}>
      <MediaObject center noMargin figure={<AppIcon {...props} style={{ cursor: clickable ? 'pointer' : 'default', zIndex: 2 }} />}>
        <MediaQuery small>
          {
            label && <div title={label} className={labelClasses}>{label}</div>
          }
          {
            name && <div title={label} className={nameClasses}>{name}</div>
          }
        </MediaQuery>
      </MediaObject>
    </div>
  );
}