import React, { Component } from "react";
import "./NotFoundWidget.css";
import HelperIcon from "../../Assets/Image/icon-helper.svg";
import { Link } from "react-router-dom";

class NotFoundWidget extends Component {
  state = {
    link: {
      pathname: "/transactions",
      filter: { result: "", types: "", title: "" },
    },
  };

  render() {
    return (
      <div className="notfound-widget">
        <img src={HelperIcon} alt="icon_helper"></img>
        {this.props.widgetTitle ? (
          <div>
            <p>There are no {this.props.widgetTitle} to display.</p>
            <p>This is a good thing!</p>
            <Link to={this.state.link}>Show All Transactions</Link>
          </div>
        ) : (
          <div>
            <p>There is nothing to display.</p>
            <p>Please select a different date.</p>
          </div>
        )}
      </div>
    );
  }
}

export default NotFoundWidget;