"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _context = require("./font-library-modal/context");
var _previewStyles = require("./font-library-modal/utils/preview-styles");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function FontFamilyItem({
  font
}) {
  const {
    handleSetLibraryFontSelected,
    setModalTabOpen
  } = (0, _element.useContext)(_context.FontLibraryContext);
  const variantsCount = font?.fontFace?.length || 1;
  const handleClick = () => {
    handleSetLibraryFontSelected(font);
    setModalTabOpen('installed-fonts');
  };
  const previewStyle = (0, _previewStyles.getFamilyPreviewStyle)(font);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItem, {
    onClick: handleClick,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
      justify: "space-between",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
        style: previewStyle,
        children: font.name
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
        className: "edit-site-global-styles-screen-typography__font-variants-count",
        children: (0, _i18n.sprintf)(/* translators: %d: Number of font variants. */
        (0, _i18n._n)('%d variant', '%d variants', variantsCount), variantsCount)
      })]
    })
  });
}
var _default = exports.default = FontFamilyItem;
//# sourceMappingURL=font-family-item.js.map