import React, {FC} from 'react';

import {AvatarGroupStyle as S} from './styles/avatar-group.style';
import {AvatarComponent} from '../avatar/avatar.component';
import {ConditionalWrapperComponent as ConditionalWrapper} from '../../atoms/conditional-wrapper';
import type {IAvatarGroup} from './avatar-group.type';

export const AvatarGroupComponent: FC<IAvatarGroup> = ({
    size,
    data,
    max = 1000,
    wrapper,
}) => {
    const slicedData = data?.slice(0, max);

    return (
        <S.Container>
            {slicedData?.map((item: any) => (
                <S.Frame data={slicedData} size={size} key={item.id}>
                    <ConditionalWrapper
                        enable={!!wrapper}
                        wrapper={
                            wrapper
                                ? (children) => wrapper(item, children)
                                : undefined
                        }
                    >
                        <AvatarComponent
                            border
                            size={size}
                            placeholder={item.name}
                            src={item.src}
                            round='full'
                        />
                    </ConditionalWrapper>
                </S.Frame>
            ))}
            {data.length - max !== 0 && data.length - max >= 0 && (
                <S.Frame data={slicedData} size={size}>
                    <AvatarComponent
                        border
                        size={size}
                        unlimitedPlaceholder
                        placeholder={`${data.length - max}+`}
                        round='full'
                    />
                </S.Frame>
            )}
        </S.Container>
    );
};