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