import _extends from "@babel/runtime/helpers/extends";
import React, { cloneElement, useRef } from 'react';
import { DialogBase } from '../dialog';
import theme from './theme.css';
import { Heading1, Heading3, TextBody } from '../typography';
import Box from '../box';
import MarketingButton from '../marketingButton';
import Flex from '../flex';

var MarketingDialog = function MarketingDialog(_ref) {
  var active = _ref.active,
      onCloseClick = _ref.onCloseClick,
      onEscKeyDown = _ref.onEscKeyDown,
      onOverlayClick = _ref.onOverlayClick,
      title = _ref.title,
      graphic = _ref.graphic,
      subtitle = _ref.subtitle,
      body = _ref.body,
      primaryAction = _ref.primaryAction,
      secondaryAction = _ref.secondaryAction;
  var ctaRef = useRef(null);
  return /*#__PURE__*/React.createElement(DialogBase, {
    active: active,
    onCloseClick: onCloseClick,
    onEscKeyDown: onEscKeyDown,
    onOverlayClick: onOverlayClick,
    className: theme['marketing-dialog'],
    initialFocusRef: ctaRef
  }, /*#__PURE__*/React.createElement(DialogBase.Header, {
    onCloseClick: onCloseClick
  }, /*#__PURE__*/React.createElement(Heading3, null, title)), /*#__PURE__*/React.createElement(DialogBase.Body, {
    scrollable: true,
    display: "flex",
    flexDirection: "row",
    padding: 6,
    justifyContent: "space-between",
    alignItems: "center"
  }, /*#__PURE__*/React.createElement(Box, {
    borderWidth: 1,
    borderRadius: "rounded",
    overflow: "hidden"
  }, /*#__PURE__*/cloneElement(graphic, {
    width: '480',
    height: '270',
    className: theme['marketing-dialog-graphic']
  })), /*#__PURE__*/React.createElement(Box, {
    className: theme['marketing-dialog-text']
  }, /*#__PURE__*/React.createElement(Heading1, null, subtitle), /*#__PURE__*/React.createElement(TextBody, {
    marginTop: 3,
    marginBottom: 4
  }, body), /*#__PURE__*/React.createElement(Flex, {
    direction: "column",
    alignItems: "center",
    gap: 3
  }, /*#__PURE__*/React.createElement(MarketingButton, _extends({
    ref: ctaRef
  }, primaryAction, {
    level: "primary",
    fullWidth: true
  })), secondaryAction && /*#__PURE__*/React.createElement(MarketingButton, _extends({}, secondaryAction, {
    level: "link",
    fullWidth: true
  }))))));
};

export default MarketingDialog;