// Questions Component.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import Question from './Question';

export default () => (
  questions.map((question, index) => (<Question question={question} key={index}/>))
);

// Question Component.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

const pollDetailsStyle = {
  padding: 10,
  border: '1px solid #eed3d7',
  borderRadius: 10,
  marginBottom: 5
};

class Question extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedOption: null
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(id) {
    this.setState({
      selectedOption: id
    });
  };

  render() {
    const { question, options, questionId } = this.props.question;

    const optionsDisplay = options.map(({ text, id }, optionIndex) => (
      <p key={optionIndex}>
        <input
          type="radio"
          onChange={() => this.handleChange(id)}
          checked={this.state.selectedOption === id}
        />
        {text}
      </p>
    ));

    return (
      <div>
        <div style={pollDetailsStyle}>
          <p style={{ fontWeight: 'bold' }}>
            {question}
          </p>
          <form>
            {optionsDisplay}
          </form>
        </div>
      </div>
    );
  }
}

export default Question;