import Avatar from "@/components/ui/Avatar/Avatar";
import { cn } from "@/lib/utils";

interface AvatarsProps extends React.ComponentProps<"div"> {
  avatars: React.ComponentProps<typeof Avatar>[];
  generalAvatarProps?: React.ComponentProps<typeof Avatar>;
}
export default function Avatars({
  avatars,
  generalAvatarProps,
  ...props
}: AvatarsProps) {
  return (
    <div
      {...props}
      className={cn(
        "*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2",
        props.className
      )}
    >
      {avatars.map((avatar, index) => (
        <Avatar
          {...generalAvatarProps}
          {...avatar}
          imageProps={{
            ...generalAvatarProps?.imageProps,
            ...avatar.imageProps,
          }}
          fallbackProps={{
            ...generalAvatarProps?.fallbackProps,
            ...avatar.fallbackProps,
          }}
          key={index}
        />
      ))}
    </div>
  );
}
