import { jsxs as d, jsx as l } from "react/jsx-runtime";
import { useCallback as m } from "react";
import { MEDIA_ALIGNMENT_OPTIONS as f } from "../../constants/index.js";
import i from "../../../box/Box.js";
import s from "../../../button/Button.js";
const v = ({ selectedVideo: r, onAction: e }) => {
  const u = m(
    (a) => {
      e == null || e("videoAlignment", {
        alignment: a
      });
    },
    [e]
  ), t = m(() => {
    e == null || e("deleteVideo");
  }, [e]);
  return r ? (
    // Container styling (bg, shadow, border, rounded, padding) is provided by the
    // parent PopoverContent. This component only handles inner layout.
    /* @__PURE__ */ d(i, { className: "flex flex-row items-center gap-[var(--spacing-2)]", children: [
      /* @__PURE__ */ l(i, { className: "flex flex-row gap-[var(--spacing-1)]", children: f.map((a) => /* @__PURE__ */ l(
        s,
        {
          variant: r.alignment === a.value ? "default" : "outline",
          icon: a.icon,
          "aria-label": a.ariaLabel,
          onClick: () => u(a.value)
        },
        a.value
      )) }),
      /* @__PURE__ */ l(s, { variant: "destructive", icon: "Trash2", "aria-label": "Video löschen", onClick: t })
    ] })
  ) : null;
};
v.displayName = "HtmlEditorVideoBubbleMenu";
export {
  v as default
};
//# sourceMappingURL=HtmlEditorVideoBubbleMenu.js.map
