import React from 'react';
import { Avatar } from '../../atoms';

type AvatarType = {
  image?: string;
  name?: string;
};

type AvatarGroupProps = {
  avatars: AvatarType[];
  groupCount?: number;
  size?: "xm" | "sm"
};

const AvatarGroup = ({ avatars, groupCount = 4, size = "xm" }: AvatarGroupProps) => {
  return (
    <section className='flex'>
      {(avatars || []).slice(0, groupCount).map((x: any, index: number) => (
        <Avatar
          key={`avatarGroup-item-${index}`}
          image={x.image}
          name={x.name}
          size={size}
          className='-ml-1 border border-white'
        />
      ))}
      <div
        className='rounded-full text-mono-600 font-inter text-xs flex justify-center items-center px-2'
      >{(avatars?.length || 0 - groupCount).toString()}</div>
    </section>
  );
};

export { AvatarGroup, AvatarGroupProps };
