import React, { Component } from "react";
import Tile from "./Tile";
import SimpleBarGraph from "../Graph/SimpleBarGraph";
import "./ColorTile.css";
import PropTypes from "prop-types";

class ColorTile extends Component {
  render() {
    return (
      <Tile
        title={this.props.title}
        viewDetailsHref={this.props.result}
        viewConfigHref={this.props.viewConfigHref}
        displayLinks={this.props.count > 0 || this.props.amount > 0}
        isShowNotification={this.props.isShowNotification}
        isLoading={this.props.isLoading}
        onToggleNotification={this.props.onToggleNotification}
      >
        <div className="approved-widget">
          <div className="widget-count">{this.props.count}</div>
          <SimpleBarGraph
            amount={this.props.amount}
            description={this.props.description}
            type={this.props.type}
            total={this.props.total}
            amountType={this.props.amountType}
          />
        </div>
      </Tile>
    );
  }
}

ColorTile.propTypes = {
  title: PropTypes.string,
  result: PropTypes.string,
  count: PropTypes.number,
  amount: PropTypes.number,
  isLoading: PropTypes.bool,
  className: PropTypes.string,
};

export default ColorTile;