import { FC } from 'react';
import { Flex, Icon, Text } from '@servicetitan/anvil2';
import { core } from '@servicetitan/anvil2/token';
import IconTitanIntelligence from '@servicetitan/anvil2/assets/icons/st/titan_intelligence.svg';
import { Loader } from '../loader';
import { MessageProps } from './message-interface';
import { ErrorMessage } from './error-message';

export interface AssistantMessageProps extends MessageProps {
    error?: string | boolean;
    svgIcon?: any;
    assistant?: string;
    onRetry?: () => void;
}

export const AssistantMessage: FC<AssistantMessageProps> = ({
    error,
    onRetry,
    message,
    classes,
    assistant,
    svgIcon,
}) => {
    return (
        <Flex direction="column" className={classes}>
            <Flex>
                <span
                    className="m-inline-end-1"
                    style={{ color: core.semantic.ForegroundColorPrimary.value }}
                >
                    <Icon svg={svgIcon || IconTitanIntelligence} size="large" inherit />
                </span>
                <Text inline>
                    <b>{assistant ? assistant : 'Assist'}</b>
                </Text>
            </Flex>
            <Flex direction="column">
                {message && !error && <Text size="medium">{message}</Text>}
                {error && <ErrorMessage error={error} message={message} onRetry={onRetry} />}
                {!message && !error && <Loader />}
            </Flex>
        </Flex>
    );
};