import { j as r } from "../../node_modules/react/jsx-runtime.js";
import { DropdownMenu as x, DropdownMenuTrigger as d, DropdownMenuContent as p, DropdownMenuLabel as u, DropdownMenuSeparator as h } from "../DropdownMenu/index.js";
import { Avatar as s, AvatarImage as t, AvatarFallback as i } from "../Avatar/index.js";
import { Icon as a } from "../Icon/index.js";
function w({
  imageUrl: n,
  fallback: c,
  label: e,
  children: m
}) {
  const o = c ?? (e == null ? void 0 : e.charAt(0));
  return /* @__PURE__ */ r.jsxs(x, { children: [
    /* @__PURE__ */ r.jsxs(d, { className: "group avatar-dropdown-menu-trigger", children: [
      /* @__PURE__ */ r.jsxs(s, { children: [
        /* @__PURE__ */ r.jsx(t, { src: n }),
        /* @__PURE__ */ r.jsx(i, { className: "group-hover:bg-interaction-main-hover group-aria-expanded:bg-interaction-main-active", children: o ?? /* @__PURE__ */ r.jsx(a, { name: "user", size: "sm" }) })
      ] }),
      /* @__PURE__ */ r.jsx(
        a,
        {
          name: "chevron-down",
          size: "xs",
          className: "group-hover:text-interaction-main-hover group-aria-expanded:text-interaction-main-active transition-transform group-aria-expanded:rotate-180"
        }
      )
    ] }),
    /* @__PURE__ */ r.jsxs(p, { children: [
      /* @__PURE__ */ r.jsxs(u, { className: "flex flex-row items-center gap-5", children: [
        /* @__PURE__ */ r.jsxs(s, { className: "w-8 h-8", children: [
          /* @__PURE__ */ r.jsx(t, { src: n }),
          /* @__PURE__ */ r.jsx(i, { children: o ?? /* @__PURE__ */ r.jsx(a, { name: "user", size: "xs" }) })
        ] }),
        /* @__PURE__ */ r.jsx("div", { className: "w-36 max-h-12 line-clamp-2", children: e ?? "My Account" })
      ] }),
      /* @__PURE__ */ r.jsx(h, {}),
      m
    ] })
  ] });
}
export {
  w as AvatarDropdown
};
