import * as React from "react";
import styled from "styled-components";
import { Typography } from "@webiny/ui/Typography";
import { List, ListItem, ListItemGraphic, ListItemMeta } from "@webiny/ui/List";
import { ReactComponent as EditorMockIcon } from "@svgr/webpack!../assets/editor-mock.svg";
import { ReactComponent as LearnMoreHelpIcon } from "@svgr/webpack!../assets/help-learn-more.svg";
import { ReactComponent as LearnMoreRightArrowIcon } from "@svgr/webpack!../assets/learn-more-right-arrow.svg";
var SlideContainer = /*#__PURE__*/styled("div", {
  target: "eogjclw0",
  label: "SlideContainer"
})({
  display: "flex",
  flexDirection: "column",
  width: 800,
  height: 600,
  alignItems: "center",
  justifyContent: "flex-end"
});
var EditorMock = /*#__PURE__*/styled("div", {
  target: "eogjclw1",
  label: "EditorMock"
})({
  width: "100%",
  textAlign: "center",
  marginBottom: -10,
  position: "relative",
  ">svg.editor-mock": {
    width: 725,
    height: "100%"
  }
});
var TextHolder = /*#__PURE__*/styled("div", {
  target: "eogjclw2",
  label: "TextHolder"
})({
  backgroundColor: "#B7A2BF",
  width: "100%",
  height: 245,
  display: "flex",
  zIndex: 1
});
var IconHolder = /*#__PURE__*/styled("div", {
  target: "eogjclw3",
  label: "IconHolder"
})({
  backgroundColor: "#72457F",
  width: 200,
  height: 245,
  display: "flex",
  alignItems: "center",
  justifyContent: "center"
});
var TextHolderInner = /*#__PURE__*/styled("div", {
  target: "eogjclw4",
  label: "TextHolderInner"
})({
  width: 600,
  height: 245,
  padding: 25,
  boxSizing: "border-box",
  color: "white",
  position: "relative"
});
var LearnMore = /*#__PURE__*/styled("div", {
  target: "eogjclw5",
  label: "LearnMore"
})({
  width: 520,
  color: "white",
  backgroundColor: "#72457F",
  position: "absolute",
  bottom: 25,
  ">.mdc-list": {
    padding: "0 !important",
    ".mdc-list-item": {
      color: "white"
    },
    ".mdc-list-item__meta": {
      color: "white",
      width: 24,
      height: 24,
      display: "inline-flex",
      flexShrink: 0,
      alignItems: "center",
      justifyContent: "center"
    }
  }
});

var SlideOutline = function SlideOutline(props) {
  return /*#__PURE__*/React.createElement(SlideContainer, null, /*#__PURE__*/React.createElement(EditorMock, null, /*#__PURE__*/React.createElement(EditorMockIcon, {
    className: "editor-mock"
  }), props.editorContent), /*#__PURE__*/React.createElement(TextHolder, null, /*#__PURE__*/React.createElement(IconHolder, null, props.icon), /*#__PURE__*/React.createElement(TextHolderInner, null, /*#__PURE__*/React.createElement("h4", null, /*#__PURE__*/React.createElement(Typography, {
    use: "headline4"
  }, props.title)), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Typography, {
    use: "body1"
  }, props.description)), /*#__PURE__*/React.createElement(LearnMore, null, /*#__PURE__*/React.createElement(List, {
    nonInteractive: true
  }, /*#__PURE__*/React.createElement(ListItem, {
    onClick: function onClick() {
      return window.open(props.learnMoreLink, "_blank");
    }
  }, /*#__PURE__*/React.createElement(ListItemGraphic, null, /*#__PURE__*/React.createElement(LearnMoreHelpIcon, null)), props.learnMoreText, /*#__PURE__*/React.createElement(ListItemMeta, null, /*#__PURE__*/React.createElement(LearnMoreRightArrowIcon, null))))))));
};

export default SlideOutline;
//# sourceMappingURL=SlideOutline.js.map