"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _utils = require("./utils");
var _fontDemo = _interopRequireDefault(require("./font-demo"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function CollectionFontVariant({
  face,
  font,
  handleToggleVariant,
  selected
}) {
  const handleToggleActivation = () => {
    if (font?.fontFace) {
      handleToggleVariant(font, face);
      return;
    }
    handleToggleVariant(font);
  };
  const displayName = font.name + ' ' + (0, _utils.getFontFaceVariantName)(face);
  const checkboxId = (0, _element.useId)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: "font-library-modal__font-card",
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
      justify: "flex-start",
      align: "center",
      gap: "1rem",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.CheckboxControl, {
        checked: selected,
        onChange: handleToggleActivation,
        __nextHasNoMarginBottom: true,
        id: checkboxId
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
        htmlFor: checkboxId,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontDemo.default, {
          font: face,
          text: displayName,
          onClick: handleToggleActivation
        })
      })]
    })
  });
}
var _default = exports.default = CollectionFontVariant;
//# sourceMappingURL=collection-font-variant.js.map