import { jsx, jsxs } from "react/jsx-runtime";
import { Menu as YogaMenu } from "@gympass/yoga";
import { MenuMore } from "@gympass/yoga-icons";
import styled, { css } from "styled-components";
import Icon from "../../../Icon";
const StyledAction = styled.div`
  ${({
  theme: {
    yoga: {
      components: {
        navigationmenu: { backgroundColor, border, height, width, icon }
      }
    }
  }
}) => css`
      transition: background-color 300ms ease-in-out;

      display: flex;
      align-items: center;
      justify-content: center;
      width: ${width.xxlarge}px;
      height: ${height.xxlarge}px;
      border-radius: ${border.radius.action}px;

      svg {
        fill: ${icon.fill.actions};
      }

      :hover,
      &:focus {
        cursor: pointer;
        background-color: ${backgroundColor.hover};
      }
    `}
`;
function Actions({ actions, sideOffset, zIndex }) {
  if (!(actions == null ? void 0 : actions.length)) {
    return null;
  }
  return /* @__PURE__ */ jsxs(YogaMenu, { onMouseHover: false, children: [
    /* @__PURE__ */ jsx(YogaMenu.Action, { children: /* @__PURE__ */ jsx(StyledAction, { children: /* @__PURE__ */ jsx(Icon, { as: MenuMore, size: "medium" }) }) }),
    /* @__PURE__ */ jsx(
      YogaMenu.List,
      {
        side: "right",
        sideOffset,
        zIndex: `${zIndex != null ? zIndex : 2}`,
        children: actions.map(({ id, label, onClick }) => /* @__PURE__ */ jsx(YogaMenu.Item, { onClick, children: label }, id))
      }
    )
  ] });
}
var Actions_default = Actions;
export {
  Actions_default as default
};
