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

function Question(props) {
  return (
    <Segment id='question' color={props.color} colorWeight={300} borderWeight={2}>
      <div>
        <div className='mb-4 flex w-full items-center '>
          <div className='flex-1 font-semibold'>سوال:</div>
          <div className='col-span-1'>
            <Icons cardId={props.cardId} rate={props.rate} setRate={props.setRate} />
          </div>
        </div>
        <div dangerouslySetInnerHTML={{ __html: props.question }} />
      </div>
    </Segment>
  );
}

Question.defaultProps = { color: DEFAULT_COLOR };

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

export default Question;
