Avatar Stack

import { cn } from "@/lib/utils";

export interface AvatarStackProps {
  people?: string[];
  /** Max avatars before “+N”. */
  max?: number;
  size?: "sm" | "md";
  /** Optional label after the stack (e.g. “in this meeting”). */
  label?: string;
  className?: string;
}

const TONES = [
  "from-da-primary to-da-accent",
  "from-da-accent to-da-success",
  "from-da-danger to-da-primary",
  "from-da-warning to-da-danger",
  "from-da-success to-da-primary",
];

/** Overlapping gradient avatars inside a glass pill with a “+N” counter and optional label; hovering lifts an avatar. */
export function AvatarStack({
  people = ["Amara Diallo", "Leo Park", "Sofia Rossi", "Noah Klein", "Jin Park", "Priya Raman", "Tomás Herrera"],
  max = 4,
  size = "md",
  label = "in this meeting",
  className,
}: AvatarStackProps) {
  const shown = people.slice(0, max);
  const rest = people.length - shown.length;
  const s = size === "sm" ? "size-7 text-[10px]" : "size-9 text-xs";
  return (
    <span
      className={cn(
        "da-stroke inline-flex items-center gap-2 rounded-da-pill bg-da-surface py-1 pr-3 pl-1 shadow-da-sm backdrop-blur-da backdrop-saturate-150",
        className,
      )}
    >
      <ul className="flex -space-x-2" aria-label={`${people.length} people: ${people.join(", ")}`}>
        {shown.map((p, i) => (
          <li
            key={p}
            title={p}
            aria-hidden
            className={cn(
              "da-transition grid place-items-center rounded-full bg-gradient-to-br font-semibold text-da-primary-fg ring-2 ring-da-bg hover:z-10 hover:-translate-y-1",
              TONES[i % TONES.length],
              s,
            )}
          >
            {p
              .split(" ")
              .map((w) => w[0])
              .join("")}
          </li>
        ))}
        {rest > 0 && (
          <li aria-hidden className={cn("grid place-items-center rounded-full bg-da-fg font-semibold text-da-bg ring-2 ring-da-bg", s)}>
            +{rest}
          </li>
        )}
      </ul>
      {label && (
        <span aria-hidden className="text-sm font-medium text-da-muted-fg">
          <span className="text-da-fg">{people.length}</span> {label}
        </span>
      )}
    </span>
  );
}

export default AvatarStack;