import { Component } from 'react';
import PropTypes from 'prop-types';
import Option from './option';

class OptionContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: [
        ...props.options,
        {
          id: 0,
          text: 'نمی دانم',
          isCorrect: false
        }
      ]
    };
  }

  render() {
    return (
      <div id='options' className='space-y-3 px-4'>
        {this.state.options.map((option, index) => (
          <Option key={option.id} option={option} index={index} />
        ))}
      </div>
    );
  }
}

OptionContainer.propTypes = {
  cardId: PropTypes.number.isRequired,
  options: PropTypes.arrayOf(PropTypes.object).isRequired
};

export default OptionContainer;
