import { jsx, jsxs } from "react/jsx-runtime";
import { useId } from "@wordpress/element";
import { CheckboxControl, Flex } from "@wordpress/components";
import { getFontFaceVariantName } from "./utils";
import FontDemo from "./font-demo";
function CollectionFontVariant({
  face,
  font,
  handleToggleVariant,
  selected
}) {
  const handleToggleActivation = () => {
    if (font?.fontFace) {
      handleToggleVariant(font, face);
      return;
    }
    handleToggleVariant(font);
  };
  const displayName = font.name + " " + getFontFaceVariantName(face);
  const checkboxId = useId();
  return /* @__PURE__ */ jsx("div", { className: "font-library-modal__font-card", children: /* @__PURE__ */ jsxs(Flex, { justify: "flex-start", align: "center", gap: "1rem", children: [
    /* @__PURE__ */ jsx(
      CheckboxControl,
      {
        checked: selected,
        onChange: handleToggleActivation,
        __nextHasNoMarginBottom: true,
        id: checkboxId
      }
    ),
    /* @__PURE__ */ jsx("label", { htmlFor: checkboxId, children: /* @__PURE__ */ jsx(
      FontDemo,
      {
        font: face,
        text: displayName,
        onClick: handleToggleActivation
      }
    ) })
  ] }) });
}
var collection_font_variant_default = CollectionFontVariant;
export {
  collection_font_variant_default as default
};
//# sourceMappingURL=collection-font-variant.js.map
