import React, {Component, PropTypes} from 'react';
import classNames from 'classnames';
import customPropTypes from '../../utils/customPropTypes';

export default class Item extends Component {
  static propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    description: customPropTypes.mutuallyExclusive(['children']),
    extra: PropTypes.node,
    heading: PropTypes.node.isRequired,
    image: PropTypes.node,
    meta: PropTypes.node,
  };

  render() {
    let heading = <div className='header'>{this.props.heading}</div>;
    let meta = <div className='meta'>{this.props.meta}</div>;
    let description = <div className='description'>{this.props.children || this.props.description}</div>;
    let extra = <div className='extra'>{this.props.extra}</div>;
    let content = (
      <div className='middle aligned content'>
        {this.props.heading && heading}
        {this.props.meta && meta}
        {this.props.children && description || this.props.description && description}
        {this.props.extra && extra}
      </div>
    );
    let hasContent = !!this.props.heading || !!this.props.meta || !!this.props.extra || !!this.props.children
    || !!this.props.description;

    let classes = classNames(
      'sd-item',
      this.props.className,
      'item',
    );
    let props = _.clone(this.props);
    // Delete all static PropTypes props in cloned porps object before spreading of props onto rendered component
    delete props.children;
    delete props.className;
    delete props.description;
    delete props.extra;
    delete props.heading;
    delete props.image;
    delete props.meta;

    return (
      <div {...props} className={classes}>
        {this.props.image}
        {hasContent && content}
      </div>
    );
  }
}

@@ -273,16 +273,52 @@
 string,%0A
+    contentClass: PropTypes.string,%0A
     desc
@@ -433,19 +433,8 @@
 node
-.isRequired
 ,%0A  
@@ -490,16 +490,83 @@
 ,%0A  %7D;%0A%0A
+  static defaultProps = %7B%0A    contentClass: 'middle aligned',%0A  %7D%0A%0A
   render
@@ -865,32 +865,122 @@
 s.extra%7D%3C/div%3E;%0A
+    let contentClass = classNames('sd-item-content', this.props.contentClass, 'content');%0A
     let content 
@@ -1008,32 +1008,22 @@
 ame=
-'middle aligned 
+%7B
 content
-'
+Class%7D
 %3E%0A  

update content class to be prop that can be over written if needed