import { jsx, jsxs } from "react/jsx-runtime";
import styled, { css } from "styled-components";
import { ChevronDown } from "@gympass/yoga-icons";
import Text from "../../../Text";
import Icon from "../../../Icon";
const StyledMenu = styled.div`
  ${({
  hasAction,
  theme: {
    yoga: {
      components: {
        navigationmenu: {
          backgroundColor,
          border,
          gap,
          padding,
          height,
          hover
        }
      }
    }
  }
}) => css`
      transition: background-color 300ms ease-in-out;

      display: grid;
      align-items: center;
      width: 100%;
      grid-template-columns: max-content 1fr max-content;
      gap: ${gap.xxsmall}px;
      padding: ${padding.xsmall}px;
      background-color: ${backgroundColor.contextMenu};
      border-radius: ${border.radius.contextMenu}px;
      min-height: ${height.contextMenu}px;

      ${hasAction && css`
        cursor: pointer;
        &:hover,
        &:focus {
          ${hover.contextMenu}
        }
      `}
    `}
`;
const StyledTextContainer = styled.div`
  ${({
  theme: {
    yoga: {
      components: {
        navigationmenu: { gap }
      }
    }
  }
}) => css`
      display: flex;
      flex-direction: column;
      gap: ${gap.xxxsmall}px;
      overflow: hidden;
    `}
`;
const StyledTitle = styled(Text.Display4)`
  ${({
  theme: {
    yoga: {
      components: {
        navigationmenu: { font }
      }
    }
  }
}) => css`
      font-size: ${font.size.contextMenu.title}px;
      line-height: ${font.size.contextMenu.title}px;
      font-weight: ${font.weight.bold};
      flex: 1;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    `}
`;
const StyledSubtitle = styled(Text.Body2)`
  ${({
  theme: {
    yoga: {
      components: {
        navigationmenu: { font }
      }
    }
  }
}) => css`
      color: ${font.color.default};
    `}
`;
const StyledActionIconContainer = styled.div`
  ${({
  theme: {
    yoga: {
      components: {
        navigationmenu: { icon }
      }
    }
  }
}) => css`
    svg {
      fill: ${icon.fill.actions};
    }
  `}
`;
const StyledAvatarContainer = styled.div`
  ${({
  theme: {
    yoga: {
      components: {
        navigationmenu: { avatar }
      }
    }
  }
}) => css`
    > div:first-child {
      height: ${avatar.height}px;
      width: ${avatar.width}px;
    }
  `}
`;
const Menu = ({
  avatar: Avatar,
  icon,
  subtitle,
  title,
  onClick
}) => {
  const hasAction = Boolean(onClick);
  return /* @__PURE__ */ jsxs(StyledMenu, { hasAction, onClick, children: [
    !!Avatar && /* @__PURE__ */ jsx(StyledAvatarContainer, { children: Avatar }),
    /* @__PURE__ */ jsxs(StyledTextContainer, { children: [
      title && /* @__PURE__ */ jsx(StyledTitle, { children: title }),
      subtitle && /* @__PURE__ */ jsx(StyledSubtitle, { children: subtitle })
    ] }),
    hasAction && /* @__PURE__ */ jsx(StyledActionIconContainer, { children: /* @__PURE__ */ jsx(Icon, { as: icon != null ? icon : ChevronDown, size: "large" }) })
  ] });
};
var Menu_default = Menu;
export {
  Menu_default as default
};
