import React, { FunctionComponent } from 'react';

// import { SqPlusIcon } from '../../assets/images';
import { Avatar, AvatarProps } from '../../Avatar';
import { Users } from '../../Users';
import { CardUsersType } from '../types.d';

export const CardUsers: FunctionComponent<CardUsersType> = ({ data, children, customProps, length }) => {
  const users =
    length && length > 0
      ? data.reduce((acc, user, index) => {
          if (index < length) acc.push(user);
          return acc;
        }, [] as AvatarProps[])
      : data;

  const numberOfHiddenUsers = length ? data.length - length : 0;

  return (
    <Users
      plusButton={customProps?.plusButton}
      countButton={numberOfHiddenUsers > 0 ? { ...customProps?.countButton, count: numberOfHiddenUsers } : undefined}
      style={customProps?.style}
      className={customProps?.className}
    >
      {users.map((user) => (
        // eslint-disable-next-line react/jsx-props-no-spreading
        <Avatar {...user} key={(user.name ?? '') + (user.lastName ?? '') + (user.count?.toString() ?? '')} />
      ))}
      {children}
    </Users>
  );
};
