import { Stack } from '@servicetitan/design-system';
import classNames from 'classnames';
import { FC, PropsWithChildren, ReactNode } from 'react';
import * as Styles from './message-user.module.less';

export interface IMessageUserProps {
    messageFooter?: ReactNode;
    isError?: boolean;
    className?: string;
}

export const MessageUser: FC<PropsWithChildren<IMessageUserProps>> = ({
    children,
    className,
    isError,
    messageFooter,
}) => {
    return (
        <div
            className={classNames(Styles.messageRoot, 'max-w-100', className)}
            data-cy2="titan-chat-message"
            data-cy="titan-chat-message-user"
        >
            <Stack
                direction="column"
                spacing="1"
                className={classNames('max-w-100', Styles.messageContent)}
            >
                <div
                    className={classNames(Styles.messageBubble, {
                        [Styles.error]: isError,
                    })}
                    data-cy="titan-chat-message-content"
                    data-cy2="titan-chat-message-content-user"
                >
                    {children}
                </div>
                {Boolean(messageFooter) && (
                    <div className={Styles.messageFooter} data-cy="titan-chat-message-footer">
                        {messageFooter}
                    </div>
                )}
            </Stack>
        </div>
    );
};