import { Stack } from '@servicetitan/design-system';
import { useDependencies } from '@servicetitan/react-ioc';
import { CHAT_UI_STORE_TOKEN } from '@servicetitan/titan-chat-ui-common';
import { observer } from 'mobx-react';
import { FC } from 'react';
import { ChatError } from './chat-error';
import { ChatTimer } from './chat-timer';

export interface IChatNotificationsProps {}

export const ChatNotifications: FC<IChatNotificationsProps> = observer(() => {
    const [chatUiStore] = useDependencies(CHAT_UI_STORE_TOKEN);
    return (
        <Stack direction="column" spacing="2" data-cy="titan-chat-notifications">
            {chatUiStore.timer && !chatUiStore.isError && <ChatTimer />}
            {chatUiStore.isError && <ChatError className="m-x-3" />}
        </Stack>
    );
});