import React, { Children, cloneElement, useState } from 'react';
import clsx from 'clsx';
import { makeStyles, Typography, Divider } from '@material-ui/core';
const useStyles = makeStyles(theme => ({
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        '& > *': {
            marginLeft: 1,
        },
    },
    rootFlexGrow: {
        flexGrow: 1,
    },
}));
export const EntityHeaderStatList = props => {
    const { children, showSeperator, flexGrow = false } = props;
    const arrayChildren = Children.toArray(children);
    const classes = useStyles(props);
    return (React.createElement("div", { className: clsx({
            [classes.root]: true, //always applies
            [classes.rootFlexGrow]: flexGrow,
        }) }, Children.map(arrayChildren, (child, index) => {
        const isLast = index === arrayChildren.length - 1;
        return (React.createElement(React.Fragment, null, cloneElement(child, {
            isLast,
        }), !isLast && showSeperator && (React.createElement(Divider, { orientation: "vertical", flexItem: true }))));
    })));
};
//# sourceMappingURL=EntityHeaderStatList.js.map