import * as React from 'react';
import { AvatarProps } from '../Avatar';

export type GroupType = 'stretched' | 'condensed';
export type AvatarGroupSize = 'medium' | 'small' | 'tiny';

type AvatarItemProps = {
  ariaLabel?: AvatarProps['ariaLabel'];
  color?: AvatarProps['color'];
  imgProps?: AvatarProps['imgProps'];
  name?: AvatarProps['name'];
  text?: AvatarProps['text'];
  onClick?: AvatarProps['onClick'];
  placeholder?: AvatarProps['placeholder'];
  title?: AvatarProps['title'];
  /**
   * Applies a data-hook HTML attribute that can be used in the tests
   */
  dataHook?: AvatarProps['dataHook'];
};
export interface AvatarGroupProps {
  /**
   * Applies a data-hook HTML attribute that can be used in the tests
   */
  dataHook?: string;
  /** Specifies a CSS class name to be appended to the component’s root element.
   * @internal
   */
  className?: string;
  /**
   * Changes the way avatars are displayed inside the group.
   */
  type?: GroupType;
  /**
   * Changes the size of avatars in the group
   */
  size?: AvatarGroupSize;
  /**
   * Separates the first avatar with a divider  from the rest of the group
   */
  showDivider?: boolean;
  /**
   * Sets the maximum number of avatars to be displayed. Number which exceeds this limit will be hidden under the “N+” item.
   * @default 5
   */
  maxItems?: number;
  /**
   * Use to pass an array of avatars
   */
  items: AvatarItemProps[];
}

export default class AvatarGroup extends React.PureComponent<AvatarGroupProps> {}