import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import styles from './CommentDetail.css';
import {Icon} from 'coral-ui';

const CommentDetail = ({icon, header, info, children, className}) => {
  return (
    <div className={cn(className, styles.root)}>
      <div className={styles.headerContainer}>
        {icon && <Icon className={styles.icon} name={icon}/>}
        <h3 className={styles.header}>{header}:</h3>
        <div className={styles.info}>{info}</div>
      </div>
      {children &&
        <div className={styles.details}>
          {children}
        </div>
      }
    </div>
  );
};

CommentDetail.propTypes = {
  className: PropTypes.string,
  header: PropTypes.node,
  icon: PropTypes.string,
  info: PropTypes.node,
  children: PropTypes.node,
};

export default CommentDetail;