/* eslint-disable jsx-a11y/alt-text */
import * as React from 'react'
const alertIcon = require('./assets/alert.svg')
const todayIcon = require('./assets/today.svg')

// import alertIcon from './assets/alerts.png'


export interface UsersStatisticsProps {
  totalItems: number;
  addedThisWeek: number;
}

export default class UsersStatistics extends React.Component<UsersStatisticsProps, {}> {

  getStatisticRow(number, description, image) {
    return (
      <div className="box">
        <div className="text-wrapper">
          <p className="number">{number}</p>
          <p className="description">{description}</p>
        </div>
        <div className="image-wrapper">
          <img src={image} />
        </div>
      </div>
    )
  }

  render() {
    const { totalItems, addedThisWeek } = this.props;
    return (
      <div className="users-statistics">
        <div className="header">
          <p className="large">Team Management</p>
          <p className="small">Total of {totalItems} team members</p>
        </div>
        <div className="statistics">
          <div className="super-admins">
            {this.getStatisticRow(0, 'Super Admins', alertIcon)}
          </div>
          <div className="added-this-weeek">
            {this.getStatisticRow(addedThisWeek, 'Added this week', todayIcon)}
          </div>
        </div>
      </div>
    )
  }
}