import { useMemo } from "preact/hooks";
import { MessageTools } from "../../tools/messages";

import styles from './message.module.css';

interface IFormattedMessageProps {
    children: string;
    class?: string;
    className?: string
}

export const FormattedMessage = ({ children, ['class']: cls, className }: IFormattedMessageProps) => {
    const __html = useMemo(() => MessageTools.format(children), [children]);

    return <div
        style={{ whiteSpace: 'pre-wrap' }}
        dangerouslySetInnerHTML={{ __html }}
        class={`${cls ?? className ?? ''} ${styles.text}`}
    />;
};