import React from 'react';
import { Typography, makeStyles } from '@material-ui/core';
import clsx from 'clsx';
const useStyles = makeStyles(theme => ({
    headerRoot: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingTop: theme.spacing(1),
        paddingRight: theme.spacing(2),
        paddingBottom: theme.spacing(1),
        paddingLeft: theme.spacing(2),
        gap: theme.spacing(1.5),
        borderWidth: '1px 0px',
        borderStyle: 'solid',
        boxSizing: 'border-box',
        background: props => {
            var _a;
            return ((_a = props.style) === null || _a === void 0 ? void 0 : _a.background)
                ? props.style.background
                : theme.palette.background.paper;
        },
        borderColor: props => {
            var _a;
            return ((_a = props.style) === null || _a === void 0 ? void 0 : _a.borderColor)
                ? props.style.borderColor
                : 'rgba(0, 0, 0, 0.12)';
        },
    },
    labelText: {
        fontWeight: 'inherit',
        flexGrow: 1,
        lineHeight: '1.25rem',
    },
    labelOverflow: {
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
    },
}));
/**
 * `AmbientSummaryListHeader` component
 */
export const AmbientSummaryListHeader = props => {
    const { columns, style = {} } = props;
    const classes = useStyles(props);
    return (React.createElement("div", { className: classes.headerRoot, style: style }, columns.map((column, index) => (React.createElement("div", { key: index }, React.createElement(Typography, { variant: "caption", className: clsx(classes.labelText, classes.labelOverflow) }, column.label.toUpperCase()))))));
};
//# sourceMappingURL=AmbientSummaryListHeader.js.map