import React from 'react';
import FluidColumns from '../common/FluidColumns';
import Text from '../Text';
import { st, classes } from './TestimonialList.st.css.js';
import { dataHooks } from './constants';
/** TestimonialList is a group of layouts that display avatar, description and name. It's used in a footer of a marketing page layout. */
class TestimonialList extends React.Component {
    render() {
        const { className, dataHook, testimonials, cols } = this.props;
        return (React.createElement("div", { className: st(classes.root, className), "data-hook": dataHook },
            React.createElement(FluidColumns, { cols: cols }, testimonials.map((testimonial, index) => {
                return (React.createElement(TestimonialItem, { dataHook: dataHooks.testimonial, key: index, index: index, avatar: testimonial.avatar, text: testimonial.text, authorName: testimonial.authorName }));
            }))));
    }
}
const TestimonialItem = ({ index, avatar, text, authorName, dataHook }) => (React.createElement("div", { className: classes.testimonialItem, "data-hook": dataHook },
    avatar && (React.createElement("div", { className: classes.testimonialItemAvatar, "data-hook": `${dataHooks.testimonialAvatar}${index}` }, avatar)),
    React.createElement("div", { className: classes.testimonialItemTextArea },
        text && (React.createElement("div", { className: classes.testimonialItemText },
            React.createElement(Text, { dataHook: `${dataHooks.testimonialText}${index}`, size: "small" }, text))),
        authorName && (React.createElement(Text, { dataHook: `${dataHooks.testimonialAuthorName}${index}`, size: "small", weight: "bold" }, authorName)))));
TestimonialList.displayName = 'TestimonialList';
TestimonialList.defaultProps = {
    cols: 3,
    testimonials: [],
};
export default TestimonialList;
//# sourceMappingURL=TestimonialList.js.map