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