import { FC } from 'react';
import CustomAvatarGroup from './styles';
import { createClasses } from '../avatar';
import clsx from 'clsx';
import { AvatarGroupProps } from './types';

const AvatarGroup: FC<AvatarGroupProps> = (props) => {
  const {
    children,
    counterProps,
    stacked = true,
    size,
    customSize = 0,
    onCounterClick,
    ...rest
  } = props;

  const classes = createClasses({ customSize });

  const counterClassNames = clsx(
    'counter',
    classes.root,
    !customSize && size && classes[size],
    counterProps?.className
  );

  const componentProps = {
    additionalAvatar: {
      onClick: onCounterClick,
      ...counterProps,
      className: counterClassNames
    }
  };

  return (
    <CustomAvatarGroup
      componentsProps={componentProps}
      stacked={stacked}
      clickableCounter={!!componentProps?.additionalAvatar?.onClick}
      {...rest}
    >
      {children}
    </CustomAvatarGroup>
  );
};

export default AvatarGroup;