const truth = [
  {question: "Question 1", hasAppeard: false},
  {question: "Question 2", hasAppeard: false},
  {question: "Question 3", hasAppeard: false},
  {question: "Question 4", hasAppeard: false}
]

const dare = [
  {question: "Question 5", hasAppeard: false},
  {question: "Question 6", hasAppeard: false},
  {question: "Question 7", hasAppeard: false},
  {question: "Question 8", hasAppeard: false}
]

export {truth, dare};

class App extends Component {
  constructor() {
  super();
  this.state = {
    currQuest: null,
  }
}

handleRandomTruth = () => {
  this.setState({
  currQuest: truth[Math.floor(Math.random() * truth.length)]
 })
}

handleRandomDare = () => {
  this.setState({
  currQuest: dare[Math.floor(Math.random() * dare.length)]
 })
}

render() {
 return (
  <div className="App">
     <div className="timer">
       <CountdownTimer />
     </div>

     <div className="current-player">
       <h3>current player</h3>
     </div>

     <div className="next-player">
       <h3>next player</h3>
     </div>

     <div className="questions">
        {this.state.currQuest ? <div>{this.state.currQuest.question}
      </div> : ''}
     </div>

   <button className="btn-truth" onClick=
     {this.handleRandomTruth}>Truth</button>
   <button className="btn-dare" onClick=
     {this.handleRandomDare}>Dare</button>
   <button className="btn-home" >Home</button>
  </div>
  );
 }
}

export default App;