import PropTypes from 'prop-types';
import OptionContainer from './option-container';
import Question from './question';
import Answer from './answer';
import Reviews from './reviews';
import Footer from './footer';
import { CORRECT_COLOR, DEFAULT_COLOR } from './utils';

function Card(props) {
  const { card, color } = props;

  return (
    <div className='mb-20'>
      <Question question={card.question} color={color} />
      <OptionContainer
        cardId={card.id}
        options={card.options}
        selectedOptionId={props.selectedOptionId}
      />
      {color !== DEFAULT_COLOR && <Reviews color={color} />}
      {color !== DEFAULT_COLOR && <Answer answer={card.answer} color={color} />}
      <Footer disabledNext={color === DEFAULT_COLOR} showArchive={color === CORRECT_COLOR} />
    </div>
  );
}

Card.defaultProps = {
  color: DEFAULT_COLOR
};

Card.propTypes = {
  card: PropTypes.object.isRequired,
  selectedOptionId: PropTypes.number.isRequired,
  color: PropTypes.string.isRequired
};

export default Card;
