import e, { useState as z, useEffect as k } from "react";
import { merge as x } from "../../utilities/merge.es.es.js";
import { MenuItemContent as N } from "./MenuItemContent.es.es.js";
import { MenuItemContentSize as a, MenuItemStyle as m, SelectionIndicatorIcon as o } from "./types.es.es.js";
import { getItemElementType as A } from "../../utilities/elements.es.es.js";
import M from "../../foundation/Icon/Generated/IconCaretRight.es.es.js";
import { IconSize as b } from "../../foundation/Icon/IconSize.es.es.js";
import T from "../../foundation/Icon/Generated/IconCheckMark.es.es.js";
const L = {
  [a.XSmall]: "tw-px-5 tw-py-2 tw-min-h-[36px]",
  [a.Small]: "tw-px-5 tw-py-2.5 tw-min-h-[36px]",
  [a.Large]: "tw-px-5 tw-py-3 tw-min-h-[60px]"
};
var P = /* @__PURE__ */ ((t) => (t.Default = "Default", t.Active = "Active", t.Disabled = "Disabled", t))(P || {});
const X = {
  [m.Primary]: {
    Default: "tw-text-text-x-weak",
    Active: "tw-text-text",
    Disabled: "tw-text-text-disabled"
  },
  [m.Danger]: {
    Default: "tw-text-red-60",
    Active: "tw-text-red-70",
    Disabled: "tw-text-red-40"
  }
}, v = "tw-cursor-pointer tw-flex tw-items-center tw-justify-between tw-transition-colors tw-gap-2", R = "hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover", u = x(["tw-w-full tw-text-left tw-py-2 tw-px-5", R]), K = ({
  title: t,
  decorator: h,
  switchComponent: g,
  subtitle: S,
  size: i = a.Small,
  style: p = m.Primary,
  disabled: s = !1,
  active: c = !1,
  selectionIndicator: D = o.Check,
  children: n,
  link: l,
  onClick: r
}) => {
  const E = p === m.Danger, f = i === a.XSmall ? b.Size16 : b.Size20, y = {
    [o.CaretRight]: /* @__PURE__ */ e.createElement(M, {
      "data-test-id": "menu-item-caret",
      size: f
    }),
    [o.Check]: c && /* @__PURE__ */ e.createElement(T, {
      "data-test-id": "menu-item-active",
      size: f
    }),
    [o.None]: null
  }[D];
  let w = "Default";
  s ? w = "Disabled" : c && (w = "Active");
  const C = X[p][w], [d, I] = z("span");
  return k(() => {
    (l || r) && I(A(l, r));
  }, [l, r]), /* @__PURE__ */ e.createElement(e.Fragment, null, n && /* @__PURE__ */ e.createElement("li", {
    "data-test-id": "menu-item",
    role: "menuitem",
    className: x(["tw-text-sm tw-leading-4 tw-text-text-weak", v])
  }, d === "a" && /* @__PURE__ */ e.createElement("a", {
    href: l,
    className: u
  }, n), d === "button" && /* @__PURE__ */ e.createElement("button", {
    type: "button",
    disabled: s,
    onClick: r,
    className: u
  }, n), d === "span" && /* @__PURE__ */ e.createElement("span", {
    className: u
  }, n)), !n && /* @__PURE__ */ e.createElement("div", {
    className: x([
      v,
      E ? "hover:tw-text-negative" : "hover:tw-text-text",
      L[i],
      s && "tw-bg-box-disabled tw-pointer-events-none",
      c && "tw-font-medium",
      C
    ])
  }, /* @__PURE__ */ e.createElement(N, {
    title: t,
    decorator: h,
    subtitle: i === a.Large ? S : void 0,
    size: i,
    switchComponent: g
  }), /* @__PURE__ */ e.createElement("div", {
    className: "tw-flex-none"
  }, y)));
};
export {
  K as MenuItem,
  P as MenuItemTextColorState,
  L as menuItemSizeClassMap,
  X as menuItemTextColorRecord
};
//# sourceMappingURL=MenuItem.es.es.js.map
