import { PersonAvatar } from "./person-avatar";

export function PersonAvatarGroup({
  companyId,
  people,
  max = 3,
  peopleLabel = "Personas",
}: {
  companyId: string;
  people: readonly { id: string; name: string; photoVersion?: string | null | undefined }[];
  max?: number;
  peopleLabel?: string;
}) {
  const visible = people.slice(0, max);
  const remaining = people.length - visible.length;

  if (!people.length) {
    return <span className="text-muted-foreground">—</span>;
  }

  return (
    <div aria-label={`${people.length} ${peopleLabel}`} className="flex items-center" role="group">
      <div className="flex -space-x-2">
        {visible.map((person) => (
          <PersonAvatar
            className="size-8 border-2 border-background"
            companyId={companyId}
            key={person.id}
            name={person.name}
            personId={person.id}
            photoVersion={person.photoVersion}
          />
        ))}
      </div>
      {remaining > 0 && (
        <span className="ml-2 inline-flex size-8 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
          +{remaining}
        </span>
      )}
    </div>
  );
}