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

export interface IMessageSystemProps {
    fullWidth?: boolean;
    className?: string;
    ['data-cy']?: string;
}

export const MessageSystem: FC<PropsWithChildren<IMessageSystemProps>> = ({
    children,
    className,
    fullWidth,
    ...rest
}) => {
    const dataCy = rest['data-cy'] ?? 'titan-chat-message-system';
    return (
        <div
            className={classNames(
                Styles.messageRoot,
                {
                    [Styles.fullWidth]: Boolean(fullWidth),
                },
                className
            )}
            data-cy2="titan-chat-message"
            data-cy={dataCy}
        >
            <Stack direction="column" spacing="1" className={Styles.messageContent}>
                {children}
            </Stack>
        </div>
    );
};