import React from "react";
import Icon from "../asorted/Icon";
import FlexBox from "../layout/Flex";
import Text from "../asorted/Text";
/**
 * A column which contains a single icon and that has a fixed width.
 */
function iconColumn({ props, header, layout, }) {
    return {
        layout: layout || "min-content",
        render: ({ elt }) => {
            const { name, weight, ...textProps } = props(elt);
            return (React.createElement(Text, { ...textProps, style: { display: "flex", alignItems: "center" } },
                React.createElement(Icon, { name: name, weight: weight })));
        },
        header,
    };
}
export { iconColumn as icon };
/**
 * A column that contains a title and a subtitle.
 */
function textColumn({ title, subtitle, header, layout, titleProps, subtitleProps, }) {
    return {
        layout: layout || "auto",
        render: ({ elt }) => (React.createElement(FlexBox, { flexDirection: "column", justifyContent: "center" },
            title && (React.createElement(Text, { fontWeight: "medium", variant: "body", textOverflow: "ellipsis", overflow: "hidden", color: "neutral.c100", ...((titleProps && titleProps(elt)) || {}) }, title(elt))),
            subtitle && (React.createElement(Text, { fontWeight: "medium", variant: "paragraph", textOverflow: "ellipsis", overflow: "hidden", color: "neutral.c80", ...((subtitleProps && subtitleProps(elt)) || {}) }, subtitle(elt))))),
        header,
    };
}
export { textColumn as text };
//# sourceMappingURL=Columns.js.map