import React from 'react';

import Graph from './Graph.js';
import './Service.css';

const Service = ({ graph, name, status, latency, description }) =>
  <div className="service">
    <header className="service__header">
      <div className="service__header__emoji">{status ? '✅' : '🚫'}</div>
      <h2 className="service__title">
        {name}
        {latency ? <span className="service__title__latency">{latency}ms</span> : null}
      </h2>
    </header>
    <p className="service__description">
      {description}
    </p>
    {graph ? <Graph width={500} height={175} data={graph}/> : null}
  </div>

export default Service;