import { jsx as i } from "react/jsx-runtime";
import { useCallback as s, useMemo as e } from "react";
import { ALIGNMENT_OPTIONS as m } from "../../constants/index.js";
import f from "../../../box/Box.js";
import g from "../../../button/Button.js";
import d from "../html-editor-toolbar-popover-action/HtmlEditorToolbarPopoverAction.js";
const u = ({ onAction: n, selectedAlignment: t }) => {
  const a = s(
    (o) => {
      n(o);
    },
    [n]
  ), p = e(() => {
    var o;
    return ((o = m.find((r) => r.value === t)) == null ? void 0 : o.icon) ?? "AlignLeft";
  }, [t]), l = e(
    () => /* @__PURE__ */ i(f, { className: "flex flex-row gap-[var(--spacing-1)] p-[var(--spacing-1)]", children: m.map(({ value: o, icon: r, ariaLabel: c }) => /* @__PURE__ */ i(
      g,
      {
        type: "button",
        onClick: () => a(o),
        "aria-label": c,
        "aria-pressed": t === o,
        variant: "ghost",
        icon: r
      },
      o
    )) }),
    [t, a]
  );
  return /* @__PURE__ */ i(d, { popoverWidth: "w-fit", action: "textAlignment", icon: p, ariaLabel: "Ausrichtung", children: l });
};
u.displayName = "HtmlEditorTextAlignmentAction";
export {
  u as default
};
//# sourceMappingURL=HtmlEditorTextAlignmentAction.js.map
