// @flow

import React from 'react'

export class Host extends React.Component {
  handleSelect = () => {
    this.props.handleSelect(this.props.keyName, this.props.hostIndex)
  }
  render () {
    let key = this.props.keyName
    return (
      <div key={key} className={ `col-xs-${this.props.gridSize}` }>
        <div className={ `host ${this.props.selected}` } onClick={this.handleSelect}>
          <img width="96" height="96" src={ '/favicon-96x96.png?v=' + (process.env.VERSION || '1.0.0') } />
          <div className='title'>{ this.props.host.name }</div>
          <div className='version'>{ this.props.host.version }</div>
        </div>
      </div>
    )
  }
}