import { AvatarProps as MuiAvatarProps } from '@mui/material/Avatar';
import { AvatarGroupProps as MuiAvatarGroupProps } from '@mui/material/AvatarGroup';
import React from 'react';
import { AvatarProps } from '../avatar';

export type CustomAvatarGroupProps = {
  /**
   * Used to turn the counter cursor to pointer when onCounterClick is provided
   */
  clickableCounter?: boolean;
  /**
   * If true, avatars will stack on top of each other
   * If false, avatars will have space between them
   */
  stacked?: boolean;
};

export type AvatarGroupProps = {
  /** Pass props to the MUI counter avatar.  \
   *
   * - [Avatar API](https://mui.com/api/avatar/)
   */
  counterProps?: Omit<MuiAvatarProps, 'children'>;
  /** The size of the MUI counter avatar
   *
   * - [P81 Avatar](https://nx-monorepo-sigma.vercel.app/?path=/story/table-in-cells-cell-avatar--primary)
   */
  size?: AvatarProps['size'];
  /** The custom size of the MUI counter avatar
   *
   * - [P81 Avatar](https://nx-monorepo-sigma.vercel.app/?path=/story/table-in-cells-cell-avatar--primary)
   */
  customSize?: AvatarProps['customSize'];
  /**
   * Only accepts [P81 Avatar](https://nx-monorepo-sigma.vercel.app/?path=/story/table-in-cells-cell-avatar--primary) as children
   */
  children?:
    | React.ReactElement<AvatarProps>
    | React.ReactElement<AvatarProps>[];
  /**
   * onClick callback when counter is clicked
   */
  onCounterClick?: React.MouseEventHandler<HTMLDivElement>;
} & Pick<CustomAvatarGroupProps, 'stacked'> &
  Omit<MuiAvatarGroupProps, 'spacing'>;