import React, { Component } from 'react';
import {Button} from 'react-md';
import '../css/Intent.css'

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

        this.state={intent: props.intent, index: props.index, onClick: props.onClick};
    }
  
    render() {
        /*
        <div className={this.props.selectedIndex===this.state.index ? 'IntentItem-selected' : 'IntentItem'} onClick={()=>{this.state.onClick(this.state.intent,this.state.index)}}>
                <Button className={"IntentItem"} flat swapTheming>OK</Button>
                <p> {this.state.index+1}. {this.state.intent.questions[0]} </p>
            </div>
        */
        return (
            <div>
                <Button className={this.props.selectedIndex===this.state.index ? 'IntentItem-selected' : 'IntentItem'}
                        onClick={()=>{this.state.onClick(this.state.intent,this.state.index)}}
                        flat>
                            {this.state.index+1}. {this.state.intent.questions[0]}
                </Button>  
                <br></br>
            </div>
        );
    }
}

export default IntentItem;