import React from 'react'
import PropTypes from 'prop-types'

import './DegradedNotice.css'

const DegradedNotice = ({ services }) => {
  const keys = Object.keys(services)
  const serviceNames = keys.join(', ')
  const plural = keys.length === 1 ? '' : 's'

  return (
    <div className="degraded-notice">
      <header>{keys.length} service{plural} are unreachable</header>
      <p>
        elstat is having trouble contacting <strong>{serviceNames}</strong>.
      </p>
    </div>
  )
}

DegradedNotice.propTypes = {
  services: PropTypes.object.isRequired,
}

export default DegradedNotice