import React from 'react';
import {observer, inject} from 'mobx-react';
import EmptyState from './../EmptyState';
import {Row, Col, Card, Icon} from 'antd';
import {Link} from 'react-router-dom';
import {LINKS} from './../../routes';

import './style.scss';

@inject('appstate')
@observer
export default class Reports extends React.Component {

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {};
    this.defaultState = Object.assign({}, this.state);
  }

  componentDidMount() {

  }

  render() {
    return (
      <div className="reports">
        {/*<EmptyState message="You dont have any purchased service yet!"></EmptyState>*/}
        <h3 style={{marginBottom: 15,fontWeight: 300, color: "#326777"}}>Project Reports</h3>
        <Row style={{marginBottom: 20}} gutter={24}>
          <Col xs={24} sm={8} lg={8}>
              <Card style={{backgroundColor: "#f6f8f9"}} className="ant-card--grey">
                <figure className="wallet"></figure>
                <h3>Average Age Report</h3>
              </Card>
          </Col>
          <Col xs={24} sm={8} lg={8}>
              <Card style={{backgroundColor: "#f6f8f9"}} className="ant-card--grey">
                <figure className="aff"></figure>
                <h3>List All Issues</h3>
              </Card>
          </Col>
          <Col xs={24} sm={8} lg={8}>
              <Card style={{backgroundColor: "#f6f8f9"}} className="ant-card--grey">
                <figure className="stop"></figure>
                <h3>Time Issues Report</h3>
              </Card>
          </Col>
        </Row>
        <Row style={{marginBottom: 20}} gutter={24}>
          <Col xs={24} sm={8} lg={8}>
              <Card style={{backgroundColor: "#f6f8f9"}} className="ant-card--grey">
                <figure className="desktop"></figure>
                <h3>Gantt Chart</h3>
              </Card>
          </Col>
        </Row>
      </div>
    )
  }
}