import PropTypes from 'prop-types';
import Header from './header';
import Question from './question';
import OptionContainer from './option-container';
import Answer from './answer';
import Footer from './footer';

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

  return (
    <div className='mb-20'>
      <Header
        cardId={card.id}
        chapterName={props.card.chapter.name}
        lessonName={props.card.lesson.name}
      />
      <Question question={card.question} />
      <OptionContainer cardId={card.id} options={card.options} />
      <Answer answer={card.answer} />
      <Footer />
    </div>
  );
}

Card.propTypes = {
  card: PropTypes.object.isRequired
};

export default Card;
