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) => (
        <Avatar
          image={x.image}
          name={x.name}
          size={size}
          className='-ml-1 border border-white'
        />
      ))}
      <Avatar
        name={(avatars?.length || 0 - groupCount).toString()}
        size={size}
        className='-ml-1 border border-white'
      />
    </section>
  );
};

export { AvatarGroup, AvatarGroupProps };
