import { jsxs, jsx } from "react/jsx-runtime";
import { Box } from "../Box/Box.mjs";
import { IconTick } from "../Accordion/AccordionItem.mjs";
import { useMenuItem } from "../MenuItem/useMenuItem.mjs";
import { checkboxSize } from "./MenuItemCheckbox.css.mjs";
const MenuItemCheckbox = ({
  children,
  onChange,
  checked,
  data,
  badge,
  id
}) => {
  const { menuItemProps, MenuItemChildren } = useMenuItem({
    onClick: () => onChange(!checked),
    formElement: true,
    data,
    id
  });
  return /* @__PURE__ */ jsxs(
    Box,
    {
      ...menuItemProps,
      "aria-checked": checked,
      role: "menuitemcheckbox",
      component: "button",
      type: "button",
      display: "flex",
      alignItems: "center",
      children: [
        /* @__PURE__ */ jsx(
          Box,
          {
            component: "span",
            borderRadius: "standard",
            boxShadow: "borderField",
            position: "relative",
            background: { lightMode: "surface" },
            marginRight: "small",
            flexShrink: 0,
            className: checkboxSize,
            children: /* @__PURE__ */ jsx(
              Box,
              {
                component: "span",
                position: "absolute",
                inset: 0,
                background: "formAccent",
                borderRadius: "standard",
                transition: "fast",
                opacity: checked ? void 0 : 0,
                children: /* @__PURE__ */ jsx(IconTick, { size: "fill" })
              }
            )
          }
        ),
        /* @__PURE__ */ jsx(
          MenuItemChildren,
          {
            tone: void 0,
            icon: void 0,
            badge,
            formElement: true,
            children
          }
        )
      ]
    }
  );
};
MenuItemCheckbox.__isMenuItem__ = true;
export {
  MenuItemCheckbox
};
