content: 'use strict'
  
  import React from 'react'
  
  const Controls = props => (
    <div className='panel-box'>
      <h4>Controls</h4>
      <div className='controls'>
        <div
          onClick={props.handlePause}>
          <span className={props.simulation ? 'fa fa-pause' : 'fa fa-play'} />
        </div>
        <div
          onClick={props.handleRandom}>
          <span className='fa fa-refresh' />
        </div>
        <div
          onClick={props.handleClear}>
          <span className='fa fa-trash' />
        </div>
      </div>
      <div className='controls'>
        <div
          onClick={props.toggleGrid}
          style={props.showGrid ? {color: '#FFFFFF'} : {color: '#999999'}}
          className='fa fa-th' />
        <div
          onClick={props.toggleFullscreen}
          className={props.fullscreen ? 'fa fa-compress' : 'fa fa-expand'} />
      </div>
    </div>
  )
  
  export default Controls
  