"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = SegmentedTextControl;
var _clsx = _interopRequireDefault(require("clsx"));
var _components = require("@wordpress/components");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * @typedef {Object} Option
 * @property {string} label The label of the option.
 * @property {string} value The value of the option.
 * @property {string} icon  The icon of the option.
 */

/**
 * Control to facilitate selecting a text style from a set of options.
 *
 * @param {Object}   props           Component props.
 * @param {string}   props.label     A label for the option.
 * @param {string}   props.value     Currently selected value.
 * @param {Function} props.onChange  Callback to handle onChange.
 * @param {Option[]} props.options   Array of options to display.
 * @param {string}   props.className Additional class name to apply.
 *
 * @return {Element} Element to render.
 */function SegmentedTextControl({
  label,
  value,
  options,
  onChange,
  className
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
    className: (0, _clsx.default)('block-editor-segmented-text-control', className),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
      as: "legend",
      children: label
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "block-editor-segmented-text-control__buttons",
      children: options.map(option => {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
          size: "compact",
          icon: option.icon,
          label: option.label,
          isPressed: option.value === value,
          onClick: () => onChange(option.value)
        }, option.value);
      })
    })]
  });
}
//# sourceMappingURL=index.js.map