"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Display = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = require("../..");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var StyledFlexDiv = _styledComponents.default.div.withConfig({
  displayName: "Display__StyledFlexDiv",
  componentId: "sc-1yo6rmg-0"
})(["display:flex;align-items:flex-start;justify-content:center;flex-direction:", ";& > *{padding:", "px;width:100%;box-sizing:border-box;}border:", ";"], function (p) {
  return p.direction;
}, function (p) {
  return p.theme.spacing.unit(p.margin || 0);
}, function (p) {
  return p.addBorder ? "1px solid #eee" : "0px";
});
var Flex = function Flex(_ref) {
  var direction = _ref.direction,
    margin = _ref.margin,
    children = _ref.children,
    addBorder = _ref.addBorder;
  return _react.default.createElement(StyledFlexDiv, {
    direction: direction,
    margin: margin,
    children: children,
    addBorder: addBorder
  });
};
var DivWithBorder = _styledComponents.default.div.withConfig({
  displayName: "Display__DivWithBorder",
  componentId: "sc-1yo6rmg-1"
})(["", ";align-self:center;"], function (p) {
  return p.horizontal ? "border-bottom: 1px solid #eee" : "border-right: 1px solid #eee";
});
var Display = exports.Display = function Display(_ref2) {
  var items = _ref2.items,
    horizontal = _ref2.horizontal,
    displayTitle = _ref2.title;
  return _react.default.createElement(_react.default.Fragment, null, displayTitle && _react.default.createElement(_.Box, {
    mb: 4
  }, _react.default.createElement(_.Typography, {
    type: "title1"
  }, displayTitle)), _react.default.createElement(Flex, {
    direction: horizontal ? 'row' : 'column'
  }, items === null || items === void 0 ? void 0 : items.map(function (_ref3) {
    var title = _ref3.title,
      component = _ref3.component;
    return _react.default.createElement(Flex, {
      direction: horizontal ? 'column' : 'row',
      margin: 5,
      key: "".concat(title),
      addBorder: true
    }, _react.default.createElement(DivWithBorder, {
      horizontal: horizontal
    }, _react.default.createElement(_.Typography, null, title)), _react.default.createElement("div", null, component));
  })), displayTitle && _react.default.createElement(_.Box, {
    mb: 8
  }));
};