import PropTypes from 'prop-types';
import Segment from '../shared/segment';
import { DEFAULT_COLOR } from './utils';

function Question(props) {
  return (
    <Segment id='question' color={props.color} colorWeight={300} borderWeight={2}>
      <span className='font-semibold'>سوال:</span>
      <div dangerouslySetInnerHTML={{ __html: props.question }} />
    </Segment>
  );
}

Question.defaultProps = { color: DEFAULT_COLOR };

Question.propTypes = {
  question: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
  color: PropTypes.string.isRequired
};

export default Question;
