"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = BlockView;
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _dom = require("@wordpress/dom");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

function BlockView({
  title,
  rawContent,
  renderedContent,
  action,
  actionText,
  className
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: className,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "block-editor-block-compare__content",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
        className: "block-editor-block-compare__heading",
        children: title
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "block-editor-block-compare__html",
        children: rawContent
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "block-editor-block-compare__preview edit-post-visual-editor",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_element.RawHTML, {
          children: (0, _dom.safeHTML)(renderedContent)
        })
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "block-editor-block-compare__action",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
        variant: "secondary",
        tabIndex: "0",
        onClick: action,
        children: actionText
      })
    })]
  });
}
//# sourceMappingURL=block-view.js.map