"use client";
import { jsx, jsxs } from "react/jsx-runtime";
const AVATAR_PALETTE = [
  "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-200",
  "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-200",
  "bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200",
  "bg-rose-100 text-rose-800 dark:bg-rose-900/40 dark:text-rose-200",
  "bg-violet-100 text-violet-800 dark:bg-violet-900/40 dark:text-violet-200",
  "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/40 dark:text-cyan-200"
];
function pickPalette(id) {
  let hash = 0;
  for (let i = 0; i < id.length; i++) {
    hash = hash * 31 + id.charCodeAt(i) | 0;
  }
  return AVATAR_PALETTE[Math.abs(hash) % AVATAR_PALETTE.length];
}
function ProjectMembersAvatarStack({
  members,
  total,
  peopleCountLabel,
  className
}) {
  const visible = members.slice(0, 4);
  const overflow = Math.max(0, total - visible.length);
  if (total === 0) {
    return /* @__PURE__ */ jsx("span", { className: `text-xs text-muted-foreground ${className ?? ""}`, children: "\u2014" });
  }
  return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${className ?? ""}`, children: [
    /* @__PURE__ */ jsxs("div", { className: "flex -space-x-1.5", children: [
      visible.map((member) => /* @__PURE__ */ jsx(
        "span",
        {
          title: member.name,
          className: `inline-flex h-6 w-6 items-center justify-center rounded-full border border-background text-[10px] font-semibold ${pickPalette(member.id)}`,
          children: member.initials
        },
        member.id
      )),
      overflow > 0 ? /* @__PURE__ */ jsxs(
        "span",
        {
          className: "inline-flex h-6 w-6 items-center justify-center rounded-full border border-background bg-muted text-[10px] font-semibold text-foreground",
          title: `+${overflow}`,
          children: [
            "+",
            overflow
          ]
        }
      ) : null
    ] }),
    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: peopleCountLabel })
  ] });
}
export {
  ProjectMembersAvatarStack
};
//# sourceMappingURL=ProjectMembersAvatarStack.js.map
