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

import './Status.css'
import Incident from './Incident'

export default function Status({ incident }) {
  const incidentOngoing = incident && incident.ongoing === 1
  const view = incidentOngoing ? (
    <Incident incident={incident} />
  ) : (
    'All systems operational'
  )

  const className = classnames(
    'status',
    incidentOngoing ? 'status-bad' : 'status-good'
  )
  return <div className={className}>{view}</div>
}

Status.propTypes = {
  incident: PropTypes.object,
}