import React, { Component } from 'react';
import { Panel, Col } from 'react-bootstrap';
import { Link } from 'react-router';

class DeviceCardComponent extends Component {
  state = {
    id: this.props.device.id,
  }

  onDeviceClick() {
    this.props.deviceClick(this.state.id);
  }

  render() {
    const { enteries, device } = this.props;

    return (
          <Col md={4} sm={6} xs={12} onClick={this.onDeviceClick.bind(this)}>
            <Panel header={device.location}>
              <h4>Device ID: {device.id}</h4>
              <span style={{ fontSize: 12 }}>Total Number of Enteries: {enteries}</span>
            </Panel>
          </Col>
    );
  }
}

export default DeviceCardComponent;
