import React from 'react';
import { st, classes } from './FeatureList.st.css.js';
import { dataHooks } from './constants';
import FluidColumns from '../common/FluidColumns';
import Text from '../Text';
/** FeatureList is a group of layouts that displays image, description and title. It's used in a footer of a marketing page to list product features. */
class FeatureList extends React.Component {
    render() {
        const { dataHook, className, features, cols } = this.props;
        return (React.createElement("div", { className: st(classes.root, className), "data-hook": dataHook },
            React.createElement(FluidColumns, { cols: cols }, features.map((feature, index) => {
                return (React.createElement(FeatureItem, { dataHook: dataHooks.feature, key: index, index: index, image: feature.image, title: feature.title, text: feature.text }));
            }))));
    }
}
const FeatureItem = ({ dataHook, index, image, title, text }) => (React.createElement("div", { className: classes.featureItem, "data-hook": dataHook },
    image && (React.createElement("div", { className: classes.featureItemImageContainer, "data-hook": `${dataHooks.featureImage}${index}`, children: image })),
    React.createElement("div", { className: classes.featureItemTextContainer },
        title && (React.createElement("div", { className: classes.featureItemTitleContainer },
            React.createElement(Text, { dataHook: `${dataHooks.featureTitle}${index}`, size: "medium", weight: "bold" }, title))),
        text && (React.createElement(Text, { dataHook: `${dataHooks.featureText}${index}`, size: "small" }, text)))));
FeatureList.displayName = 'FeatureList';
FeatureList.defaultProps = {
    cols: 3,
    features: [],
};
export default FeatureList;
//# sourceMappingURL=FeatureList.js.map