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

class OptionContainer extends Component {
  render() {
    const options = [...this.props.options, { id: 0, text: 'نمی دانم', isCorrect: false }];
    return (
      <div id='options' className='space-y-3 px-4'>
        {options.map((option, index) => (
          <Option
            key={option.id}
            option={option}
            index={index}
            isSelectedOption={this.props.selectedOptionId === option.id}
          />
        ))}
      </div>
    );
  }
}

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

export default OptionContainer;