"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

function ScreenHeader({
  title,
  description,
  onBack
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
    spacing: 0,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalView, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
        marginBottom: 0,
        paddingX: 4,
        paddingY: 3,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
          spacing: 2,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Navigator.BackButton, {
            icon: (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft,
            size: "small",
            label: (0, _i18n.__)('Back'),
            onClick: onBack
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHeading, {
              className: "edit-site-global-styles-header",
              level: 2,
              size: 13,
              children: title
            })
          })]
        })
      })
    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
      className: "edit-site-global-styles-header__description",
      children: description
    })]
  });
}
var _default = exports.default = ScreenHeader;
//# sourceMappingURL=header.js.map