import React, {FC} from 'react';

import {AvatarGroupComponent as AvatarGroup} from '../../molecules/avatar-group';
import {TooltipComponent as Tooltip} from '../../molecules/tooltip';
import {
    IAvatarTooltipGroup,
    IAvatarTooltipGroupData,
} from './avatar-tooltip-group.type';

export const AvatarTooltipGroupComponent: FC<IAvatarTooltipGroup> = ({
    ...avatarGroupProps
}) => {
    return (
        <AvatarGroup
            {...avatarGroupProps}
            wrapper={(item: IAvatarTooltipGroupData, children) => (
                <Tooltip
                    title={item?.name}
                    description={item?.description}
                    placement='top'
                >
                    {children}
                </Tooltip>
            )}
        />
    );
};