import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import TextBase from "../text";
import Card from "../card";
import { Col, Row } from "../grid";
import ScreenView from "../screen-view";
import { FeatureDesc as Desc, FeatureIcon as Icon, FeatureIconWrapper as IconWrapper, FeatureInner as Inner, FeatureTitle as Title, } from "./styled";
const Feature = ({ title, desc, iconSrc, mobilePadding, padding, key, }) => {
    return (_jsx(Col, { width: "288px", className: "ui-cards-w-icons__card-col", children: _jsx(Card, { mobilePadding: mobilePadding, padding: padding, className: "ui-cards-w-icons__card", children: _jsxs(Inner, { className: "ui-cards-w-icons__inner", children: [_jsx(IconWrapper, { className: "ui-cards-w-icons__icon-wrapper", children: _jsx(Icon, { src: iconSrc, className: "ui-cards-w-icons__icon" }) }), _jsxs(Desc, { className: "ui-cards-w-icons__desc", children: [_jsxs(Title, { className: "ui-cards-w-icons__title-wrapper", children: [_jsx(ScreenView.Large, { children: _jsx(TextBase.T2, { textAlign: "center", fontFamily: "Heavy", className: "ui-cards-w-icons__title", children: title }) }), _jsx(ScreenView.NotLarge, { children: _jsx(TextBase.F1, { textAlign: "left", fontFamily: "Heavy", className: "ui-cards-w-icons__title", children: title }) })] }), _jsx(ScreenView.Large, { children: _jsx(TextBase.T4, { textAlign: "center", className: "ui-cards-w-icons__desc", children: desc }) }), _jsx(ScreenView.NotLarge, { children: _jsx(TextBase.F2, { textAlign: "left", className: "ui-cards-w-icons__desc", children: desc }) })] })] }) }) }, key));
};
const FeatureList = ({ features, mobilePadding, padding, }) => {
    return (_jsx(Row, { spaceBetween: true, className: "ui-cards-w-icons", children: features.map((props, i) => (_createElement(Feature, { ...props, key: i, mobilePadding: mobilePadding, padding: padding }))) }));
};
export default FeatureList;
//# sourceMappingURL=index.js.map