content: import React from 'react'
  import { Jumbotron, Button, Row, Col, PageHeader } from 'react-bootstrap'
  
  const Generated = (props) => (
    <Jumbotron style={{ textAlign: 'left' }}>
      <PageHeader style={{margin: '0'}}>
        We generated the pocket<br/>for you! <small>{`#${props.pocketID}`}</small>
      </PageHeader>
      <p>You transfer the money, can pay
  and refill, and after your death we will transfer
  in pieces those whom you choose
      </p>
      <Row>
        <Col md={3}>
          <Button bsSize="large" bsStyle="success">OK! I remember</Button>
        </Col>
      </Row>
    </Jumbotron>
  )
  
  const HandMade = (props) => (
    <h1>To do</h1>
  )
  
  const Greeting = (props) => (
    <Jumbotron style={{textAlign: 'left'}}> 
      <h1>We almost done!</h1>
      <p>Now you need to decide whether you want to use the number of wallet
  generated by us or you yourself download smartcontract
  and mine it into our network
      </p>
      <Row>
        <Col md={3}>
          <Button
            onClick={props.onLeftButtonClick}
            bsSize="large" bsStyle="success">
            Make it for me
          </Button>
        </Col>
        <Col md={2}>
          <Button
            onClick={props.onRightButtonClick}
            bsSize="large"
            bsStyle="warning">
            I'll do it myself
          </Button>
        </Col>
      </Row>
    </Jumbotron>
  )
  
  class Pocket extends React.Component {
    constructor (props) {
      super(props)
      this.state = { type: '' }
    }
  
    handleLeftButtonClick () {
      this.setState({ type: 'generated' })
    }
  
    handleRightButtonClick () {
      this.setState({ type: 'handmade' })
    }
  
    render () {
      const type = this.state.type
      return (
        <div>
          {type === '' &&
            <Greeting
              onLeftButtonClick={() => this.handleLeftButtonClick()}
              onRightButtonClick={() => this.handleRightButtonClick()} />
          }
          {type === 'generated' && <Generated pocketID={1234567890}/>}
          {type === 'handmade' && <HandMade />}
        </div>
      )
    }
    
  }
  
  export default Pocket
  