import React, {FC} from 'react';

import {AvatarLabelGroupStyle as S} from './styles/avatar-label-group.style';
import {IAvatarLabelGroup} from './avatar-label-group.type';

export const AvatarLabelGroupComponent: FC<IAvatarLabelGroup> = ({
    title,
    titleClassName,
    description,
    descriptionClassName,
    avatar,
    isTruncated,
    ...props
}) => {
    return (
        <S.Container {...props}>
            <S.Avatar border data-type='avatar' round='full' src={avatar} />
            <S.Content isTruncated={isTruncated}>
                <S.Title data-type='title' className={titleClassName}>
                    {title}
                </S.Title>
                <S.Description
                    data-type='description'
                    className={descriptionClassName}
                >
                    {description}
                </S.Description>
            </S.Content>
        </S.Container>
    );
};