import React from 'react';
import cn from 'classnames';
import styles from './QuestionBox.css';
import {Icon} from 'coral-ui';
import Markdown from 'coral-framework/components/Markdown';
import DefaultQuestionBoxIcon from './DefaultQuestionBoxIcon';

const QuestionBox = ({content, icon, className, children}) => (
  <div className={cn(styles.qbInfo, 'questionbox-info', className)}>
    {
      icon === 'default' ? (
        <div className={cn(styles.qbIconContainer)}>
          <DefaultQuestionBoxIcon />
        </div>
      ) : (
        <div className={cn(styles.qbIconContainer)}>
          <Icon name={icon} className={cn(styles.icon)} />
        </div>
      )
    }
    <div className={cn(styles.qbContent, 'questionbox-content')}>
      <Markdown content={content} />
    </div>
    {children}
  </div>
);

export default QuestionBox;