content: import React from 'react';
  import Image from'./Image';
  
  export default function(props) {
    const monthly = props.monthly;
    let injuriesDirection;
    if (monthly.new_injuries_delta) injuriesDirection = monthly.new_injuries_delta ? 'up' : 'down';
  
    return (
      <article className="stats-monthly">
        <ul className="stats-list">
  
          <li className="stats-item">
            <div className="stats-item-vis">
              <span>{monthly.new_sharks}</span>
            </div>
            <div className="stats-item-label">
              New Sharks
              <div className="stats-item-label-detail">
                added to the database
              </div>
            </div>
          </li>
  
          {monthly.top_shark ? (
            <li className="stats-item stats-item--shark">
              <div className="stats-item-vis stats-item-vis--img">
                <Image src={monthly.top_shark.photo} />
              </div>
              <div className="stats-item-label">
                Most Encountered Shark
                <div className="stats-item-label-detail">
                  {monthly.top_shark.id} {monthly.top_shark.name}
                </div>
              </div>
            </li>
          ) : null}
  
          <li className="stats-item">
            <div className="stats-item-vis">
              <span>{monthly.new_injuries}</span>
            </div>
            <div className="stats-item-label">
              Sharks with New Injuries
              <div className={`stats-item-label-detail stats-item-label-detail--${injuriesDirection}`}>
                {monthly.new_injuries_delta} {injuriesDirection} %> on last week
              </div>
            </div>
          </li>
  
          {monthly.avg_encounter_duration ? (
            <li className="stats-item">
              <div className="stats-item-vis">
                <span>{monthly.avg_encounter_duration}</span>
              </div>
              <div className="stats-item-label">
                Encounter duration
                <div className="stats-item-label-detail">
                  Average encounter duration in minutes
                </div>
              </div>
            </li>
          ) : null}
  
        </ul>
  
      </article>
    );
  }