import React from 'react';
import PropTypes from 'prop-types';

const ComponentTypeIcons = props => {
  let icon = '';
  let type = '';
  let indicator = '';
  const context = props.compDetails ? 'pf-icon-small' : 'list-pf-icon list-pf-icon-small';
  switch (props.componentType) {
    case 'Module Stack':
      type = 'Type&nbsp;<strong>Module Stack</strong>';
      icon = 'fa fa-cubes';
      break;
    case 'Module':
      type = 'Type&nbsp;<strong>Module</strong>';
      icon = 'fa fa-cube';
      break;
    case 'RPM':
      type = 'Type&nbsp;<strong>RPM</strong>';
      icon = 'fa fa-sticky-note-o';
      break;
    default:
      type = 'Type&nbsp;<strong>RPM</strong>';
      icon = 'fa fa-sticky-note-o';
  }
  if (props.componentInBlueprint === true) {
    indicator = 'list-pf-icon-bordered';
    // TODO - Identify icon as belonging to dependency in the blueprint
    // if (props.isDependency) {
    //   indicator += ' list-pf-icon-bordered-dotted';
    // }
  }

  return (
    <span>
      <span
        className={`${icon} ${indicator} ${context}`}
        data-html="true"
        data-toggle="tooltip"
        title=""
        data-original-title={type}
      />
    </span>
  );
};

ComponentTypeIcons.propTypes = {
  componentType: PropTypes.string,
  compDetails: PropTypes.bool,
  componentInBlueprint: PropTypes.bool,
};

export default ComponentTypeIcons;

@@ -279,130 +279,8 @@
 ) %7B%0A
-    case 'Module Stack':%0A      type = 'Type&nbsp;%3Cstrong%3EModule Stack%3C/strong%3E';%0A      icon = 'fa fa-cubes';%0A      break;%0A
     
@@ -294,16 +294,16 @@
 odule':%0A
+
       ty
@@ -362,17 +362,27 @@
  = '
-fa fa-cub
+pficon pficon-bundl
 e';%0A
@@ -471,35 +471,36 @@
 icon = '
-fa fa-sticky-note-o
+pficon pficon-bundle
 ';%0A     
@@ -585,27 +585,28 @@
  = '
-fa fa-sticky-note-o
+pficon pficon-bundle
 ';%0A 

replace icon used for components