import React from 'react';
import styled from 'styled-components';
import { Box, Typography } from '../..';
var StyledFlexDiv = styled.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.createElement(StyledFlexDiv, {
    direction: direction,
    margin: margin,
    children: children,
    addBorder: addBorder
  });
};
var DivWithBorder = styled.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";
});
export var Display = function Display(_ref2) {
  var items = _ref2.items,
    horizontal = _ref2.horizontal,
    displayTitle = _ref2.title;
  return React.createElement(React.Fragment, null, displayTitle && React.createElement(Box, {
    mb: 4
  }, React.createElement(Typography, {
    type: "title1"
  }, displayTitle)), React.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.createElement(Flex, {
      direction: horizontal ? 'column' : 'row',
      margin: 5,
      key: "".concat(title),
      addBorder: true
    }, React.createElement(DivWithBorder, {
      horizontal: horizontal
    }, React.createElement(Typography, null, title)), React.createElement("div", null, component));
  })), displayTitle && React.createElement(Box, {
    mb: 8
  }));
};