Avatar

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

const sizes = { sm: "size-7 text-[11px]", md: "size-9 text-[13px]", lg: "size-12 text-base" };

export function Avatar({ name, src, size = "md" }: { name: string; src?: string; size?: keyof typeof sizes }) {
  const initials = name.split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
  return (
    <span className={cn("inline-grid shrink-0 place-items-center overflow-hidden rounded-full bg-primary-soft font-medium text-primary-soft-fg", sizes[size])}>
      {src ? <img src={src} alt="" className="size-full object-cover" /> : initials}
    </span>
  );
}

export function AvatarGroup({ names, max = 3 }: { names: string[]; max?: number }) {
  const rest = names.length - max;
  return (
    <div className="flex [&>*]:-ml-2 [&>*]:border-2 [&>*]:border-bg [&>*:first-child]:ml-0">
      {names.slice(0, max).map((n) => <Avatar key={n} name={n} />)}
      {rest > 0 && <span className="inline-grid size-9 place-items-center rounded-full bg-surface-2 text-[13px] text-fg-muted">+{rest}</span>}
    </div>
  );
}