import * as React from 'react';
import Panel from '../../../components/Panel';
import { Flex, Box } from '../../../components/Flex';
// We cannot destructure this.props using the react way in typescript which is a real pain as you
// need to transfer props individually as a consequence
// let { buttonContent, ...other } = this.props
export class PanelWithRow extends React.Component {
    render() {
        const headerItems = this.props.colItems.map((colItem, index) => (React.createElement(Box, { key: colItem.key || colItem.Content || index, className: "twa:font-bold twa:text-3 twa:px-1", style: {
                flex: colItem.Size,
            } }, colItem.Content)));
        const header = (React.createElement(Flex, { alignItems: "center", className: "twa:w-full" }, headerItems));
        return (React.createElement("div", { style: this.props.style, className: this.props.className },
            React.createElement(Panel, { bodyScroll: true, header: header, border: this.props.border, bodyProps: this.props.bodyProps }, this.props.children)));
    }
}
