import { BodyText } from '@servicetitan/design-system';
import { ChatParticipantIcon, getNameInitials } from '@servicetitan/titan-chat-ui-common';
import classNames from 'classnames';
import { FC, useMemo } from 'react';
import * as Styles from './message-avatar.module.less';

export interface IMessageAvatarProps {
    className?: string;
    name: string;
    icon: ChatParticipantIcon;
}

export const MessageAvatar: FC<IMessageAvatarProps> = ({ className, icon, name }) => {
    const isEmpty = icon === ChatParticipantIcon.Empty;
    const isInitials = icon === ChatParticipantIcon.Initials;
    const isBot = icon === ChatParticipantIcon.Bot;
    const isAtlas = icon === ChatParticipantIcon.Atlas;
    const nameInitials = useMemo(() => getNameInitials(name), [name]);

    return (
        <div
            className={classNames(
                'align-self-end',
                Styles.userIcon,
                {
                    [Styles.bot]: isBot,
                    [Styles.atlas]: isAtlas,
                    [Styles.system]: isEmpty,
                },
                className
            )}
            data-cy="titan-chat-avatar"
            data-cy2={`titan-chat-avatar-${icon}`}
        >
            <BodyText el="span">{isInitials ? nameInitials : null}</BodyText>
        </div>
    );
};