import _extends from "@babel/runtime/helpers/extends";
import "core-js/modules/es.array.concat.js";
import "core-js/modules/es.array.map.js";
import * as React from 'react';
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
import ServiceCard from "./components/ServiceCard/ServiceCard";
import "./ServiceCards.css";
var cn = cnCreate('mfui-service-cards');
var ServiceCards = function ServiceCards(_ref) {
  var className = _ref.className,
    classes = _ref.classes,
    items = _ref.items,
    background = _ref.background,
    dataAttrs = _ref.dataAttrs,
    rootRef = _ref.rootRef;
  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
    className: cn([className, classes === null || classes === void 0 ? void 0 : classes.root]),
    ref: rootRef
  }), /*#__PURE__*/React.createElement("div", {
    className: cn('items')
  }, items.map(function (item, i) {
    var size = i === 0 ? 'big' : 'small';
    return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
      className: cn('item', {
        size: size
      }),
      key: "".concat(item.title, "_").concat(i)
    }), /*#__PURE__*/React.createElement(ServiceCard, _extends({}, item, {
      background: background,
      size: size,
      classes: {
        root: classes === null || classes === void 0 ? void 0 : classes.card,
        title: classes === null || classes === void 0 ? void 0 : classes.cardTitle
      },
      dataAttrs: {
        root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1),
        title: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.cardTitle, i + 1)
      }
    })));
  })));
};
export default ServiceCards;