import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import logo from '../../assets/images/Srv-Flat.svg';
import HoverMarquee from '../HoverMarquee';
/**
 * Renders a server icon & label. The label defaults to server name, falling back
 * to its first address (both provided via the `data` prop). If `secondaryLabel`
 * is provided, then it will be appended.
 */

const ServerCard = ({
  name,
  addresses,
  host,
  onClickHandler,
  disabled
}) => {
  const label = name || addresses[0];
  const modifierClasses = cx('server-card', {
    'server-card--clickable': onClickHandler
  }, {
    'server-card--disabled': disabled
  });
  return /*#__PURE__*/React.createElement("div", {
    className: modifierClasses,
    onClick: onClickHandler
  }, /*#__PURE__*/React.createElement("div", {
    className: "server-card__icon-section"
  }, /*#__PURE__*/React.createElement("div", {
    className: "server-icon"
  }, /*#__PURE__*/React.createElement("img", {
    src: logo,
    alt: ""
  }))), /*#__PURE__*/React.createElement("div", {
    className: "server-card__main-section"
  }, /*#__PURE__*/React.createElement("h2", {
    className: "server-name"
  }, /*#__PURE__*/React.createElement(HoverMarquee, null, label)), /*#__PURE__*/React.createElement("h6", null, /*#__PURE__*/React.createElement(HoverMarquee, null, "Addresses:", addresses.map((address, index) => /*#__PURE__*/React.createElement(React.Fragment, {
    key: index
  }, "[", address, "]", index !== addresses.length - 1 && ',')))), /*#__PURE__*/React.createElement("h6", null, /*#__PURE__*/React.createElement(HoverMarquee, null, "Host:", host))));
};

ServerCard.propTypes = {
  name: PropTypes.string,
  addresses: PropTypes.array.isRequired,
  host: PropTypes.string,
  onClickHandler: PropTypes.func,
  disabled: PropTypes.bool
};
ServerCard.defaultProps = {
  name: undefined,
  onClickHandler: undefined,
  host: null,
  disabled: false
};
export default ServerCard;