import React from 'react'
import PropTypes from 'prop-types'
import Format from 'intl-messageformat'
import { Card, Icon } from 'patternfly-react'

const UpgradeReview = ({
  hostCount,
  hostLabel = '{count,number} {count, plural, one {Host} other {Hosts}}',
  hostsDescription = 'Will be upgraded one at a time during Cluster upgrade'
}) => {
  const hostLabelFormat = new Format(hostsLabel)
  return (
    <div className='clusterUpgradeWizard-UpgradeReview'>
      <Card>
        <Card.Title>
          <Icon type='pf' name='container-node' className='circle-icon' />
          <div className='info-label'>
            { hostLabelFormat.format({ count: hostCount }) }
          </div>
        </Card.Title>
        <Card.Body>
          { hostsDescription }
        </Card.Body>
      </Card>
    </div>
  )
}
UpgradeReview.propTypes = {
  hostCount: PropTypes.number.isRequired,
  hostLabel: PropTypes.string,
  hostsDescription: PropTypes.string
}
export default UpgradeReview