content: import React from 'react';
  import { Icon, Button } from 'react-semantify';
  import SmartTimeAgo from 'react-smart-time-ago';
  
  function capitalize(s) {
      return s && s[0].toUpperCase() + s.slice(1);
  }
  
  export const AlarmListItem = (props) => {
    const alarm = props.alarm;
    const alarmDeleted = () => {
      props.removeAlarms([alarm.id]);
    };
    const alarmEdit = () => {
      props.editAlarm(alarm.id);
    };
    const dateCreated = new Date(alarm.timeCreated * 1000);
    const renderMediaIcons = media => media.map((media, key) => {
      const className = `${media}`;
      return <Icon className={className} key={key} />
    });
    const alarmIcon = `large alarm ${alarm.active ? "":"slash"} outline middle aligned icon`;
    return <div className="item">
      <Button className="mini right floated icon" onClick={alarmDeleted}>
        <Icon className="trash"/>
      </Button>
      <Button className="mini right floated icon" onClick={alarmEdit}>
        <Icon className="edit"/>
      </Button>
      <i className={alarmIcon}></i>
      <div className="content">
        <a className="header" onClick={alarmEdit}>
          {capitalize(alarm.level)}
        </a>
        <div className="description">
          {renderMediaIcons(alarm.media)}
          <SmartTimeAgo value={dateCreated} />
        </div>
      </div>
    </div>;
  }
  