import React from 'react';
import { Icon } from '../Icon';
import { Badge } from '../Badge';

const Hint = (props) => {
  const { children, label } = props;

  return (
    <div className="ui-hint">
      <div className="ui-hint-label">
        <Badge theme="success">
          <Icon name="lightbulb-o " /> {label}
        </Badge>
      </div>
      <div className="ui-hint-content">
        {children}
      </div>
    </div>
  );
};

Hint.propTypes = {
  children: React.PropTypes.node,
  label: React.PropTypes.string.isRequired,
};

export default Hint;

@@ -105,71 +105,40 @@
  = (
-props) =%3E %7B%0A  const %7B children, label %7D = props;%0A%0A  return
+%7B children, label, icon %7D) =%3E
  (%0A
-  
   %3Cd
@@ -157,26 +157,24 @@
 =%22ui-hint%22%3E%0A
-  
     %3Cdiv cla
@@ -203,18 +203,16 @@
 %3E%0A      
-  
 %3CBadge t
@@ -235,17 +235,24 @@
         
- 
+%7Bicon &&
  %3CIcon n
@@ -259,25 +259,18 @@
 ame=
-%22lightbulb-o %22
+%7Bicon%7D
  /%3E
+%7D
  %7Bla
@@ -274,18 +274,16 @@
 %7Blabel%7D%0A
-  
       %3C/
@@ -293,27 +293,23 @@
 ge%3E%0A    
-  
 %3C/div%3E%0A
-  
     %3Cdiv
@@ -344,18 +344,16 @@
 %3E%0A      
-  
 %7Bchildre
@@ -359,18 +359,16 @@
 en%7D%0A    
- 
- 
 %3C/div%3E%0A 
@@ -372,23 +372,16 @@
 %3E%0A  
- 
- 
 %3C/div%3E%0A
-  );%0A%7D
+)
 ;%0A%0AH
@@ -476,16 +476,148 @@
 quired,%0A
+  icon: React.PropTypes.oneOfType(%5BReact.PropTypes.string, React.PropTypes.bool%5D),%0A%7D;%0A%0AHint.defaultProps = %7B%0A  icon: 'lightbulb-o',%0A
 %7D;%0A%0Aexpo

enable custom icon or no icon at all