import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
// Import forceArray from 'force-array';
// import ItemMetricGroup from '@components/item-metric-group';
import {
Card,
CardView,
CardMeta,
CardTitle,
CardSubTitle,
CardDescription,
CardGroupView,
CardOptions,
CardHeader,
// CardInfo,
Anchor
// DataCentersIcon,
// HealthyIcon,
// InstancesMultipleIcon
} from 'joyent-ui-toolkit';
const StyledCardHeader = styled(CardHeader)`
position: relative;
`;
const TitleInnerContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
`;
const ServiceListItem = ({
onQuickActionsClick = () => {},
deploymentGroup = '',
service = {}
}) => {
const isChild = Boolean(service.parent);
const children = service.children
? service.children.map(service =>
1 instance {instance.status}
); const header = isChild ? null :