import { BodyText } from '@servicetitan/design-system';
import { BodyTextProps } from '@servicetitan/design-system/dist/components/BodyText/BodyText';
import classNames from 'classnames';
import { FC, Fragment, useMemo } from 'react';
import * as Styles from './multiline-text.module.less';

interface MultilineTextProps extends BodyTextProps {
    text: string;
}

export const MultilineText: FC<MultilineTextProps> = ({ className, text, ...rest }) => {
    const textParts = useMemo(() => text.split('\n'), [text]);
    return (
        <Fragment>
            {textParts.map((part, index) => {
                return (
                    <BodyText
                        el="p"
                        // eslint-disable-next-line react/no-array-index-key
                        key={index}
                        {...rest}
                        className={classNames(Styles.multilineText, className)}
                    >
                        {part.trim() ? part : <span>&nbsp;</span>}
                    </BodyText>
                );
            })}
        </Fragment>
    );
};