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

import ViewGoals from '../../img/Goals.png';
import ViewInsights from '../../img/Insights.png';
import ViewNewGoal from '../../img/NewIcon.png'

class ClientActions extends Component {
  render() {
    return (
      <div className="col-lg-8">
        <div className="ibox float-e-margins">
          <div className="ibox-title">
            <h4 className="text-align">Client Actions</h4>
          </div>
          <div className="ibox-content">
            <div className="row" style={{width: '100%'}}>
              <div className="col-md-4">
                <button
                  style={{width: 200,
                          height: 200,
                          border: '1px solid grey',
                          margin: 10, backgroundImage:
                          `url(${ViewGoals})`}}
                  className="btn btn-default">
                </button>
              </div>
              <div className="col-md-4">
                <Link
                  style={{width: 200,
                          height: 200,
                          border: '1px solid grey',
                          margin: 10, backgroundImage:
                          `url(${ViewInsights})`}}
                  className="btn btn-default"
                  to={`/user/${this.props.client.id}/insights`}
                  >
                </Link>
              </div>
              <div className="col-md-4">
                <button
                  style={{width: 200,
                          height: 200,
                          border: '1px solid grey',
                          margin: 10, backgroundImage:
                          `url(${ViewNewGoal})`}}
                  className="btn btn-default">
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

ClientActions.contextTypes = {
  router: React.PropTypes.object.isRequired
}

export default ClientActions;