import { Avatar } from '@8base/boost';
import cx from 'classnames';
import React from 'react';

import css from './stacked-avatars.module.css';

// -- TYPES

interface IStackedAvatarsProps {
  avatars: Array<{
    id: string;
    src?: string | null;
    firstName?: string | null;
    lastName?: string | null;
  }>;
  size: 'md' | 'sm' | 'xs';
  className?: string;
  totalUsers?: number;
}

// -- MAIN

function StackedAvatars({ avatars, size, totalUsers, className }: IStackedAvatarsProps) {
  const cn = cx(className, css.base);
  const restUserCount = !!totalUsers ? totalUsers - avatars.length : 0;

  return (
    <div className={cn}>
      {avatars.map(({ id, ...avatar }) => (
        <Avatar key={id} size={size} className={css['stacked-avatar']} {...avatar} />
      ))}
      {restUserCount > 0 && (
        <span className={css['rest-user-count']}>+{restUserCount}</span>
      )}
    </div>
  );
}

StackedAvatars.defaultProps = {
  size: 'md',
};

export default StackedAvatars;