import { Stack } from '@servicetitan/design-system';
import { FC } from 'react';
import { MessageAgent } from './message-agent';
import { IMessageAvatarProps } from './message-avatar';
import * as Styles from './message-typing.module.less';

export interface IMessageTypingProps {
    avatar: IMessageAvatarProps;
}

export const MessageTyping: FC<IMessageTypingProps> = ({ avatar }) => (
    <MessageAgent avatar={avatar} data-cy="titan-chat-message-typing" subtle>
        <Stack className="h-100" alignItems="center">
            <div className={Styles.dotsContainer} data-cy="titan-chat-message-typing-dots">
                <span className={Styles.dot} />
                <span className={Styles.dot} />
                <span className={Styles.dot} />
            </div>
        </Stack>
    </MessageAgent>
);