import * as React from "react";
const refreshIcon = require("../assets/noun_Refresh_166466.svg");
const todayIcon = require("../assets/noun_today_2084414.svg");
const weekIcon = require("../assets/noun_Alert_2168837.svg");
import "./style.css";

export interface HeaderProps { updateStatus, days, daysLine, weeks, weekLine }

export default class Header extends React.Component<HeaderProps, {}> {

  render() {
    return (
      <div className="fe-audits-header">
        <div className="fe-audits-title-content">
          <h3 className="fe-audits-title">Audit Logs</h3>
          <p className="fe-audits-last-update">
            {this.props.updateStatus} <img src={refreshIcon} alt="refresh" />
          </p>
        </div>

        <div className="fe-audits-calendar">
          <div className="fe-audits-box-content fe-audits-box-space">
            <div className="fe-audits-counts">
              <p className="fe-audits-count-number">{this.props.days}</p>
              <p className="fe-audits-count-line">{this.props.daysLine}</p>
            </div>
            <div className="fe-audits-icon-day">
              <img src={todayIcon} alt="today" />
            </div>
          </div>
          <div className="fe-audits-box-content">
            <div className="fe-audits-counts">
              <p className="fe-audits-count-number">{this.props.weeks}</p>
              <p className="fe-audits-count-line">{this.props.weekLine}</p>
            </div>
            <div className="fe-audits-icon-week">
              <img src={weekIcon} alt="week" />
            </div>
          </div>
        </div>
      </div>
    );
  };
}
