import React, { ForwardedRef, forwardRef } from 'react';
import { ElementType } from 'react';
import { classNamesTailwind } from '../../utils/theme';

export interface ProseProps {
    html?: string | null;
    tag?: ElementType;
    text?: string;
    className?: string;
}

const Prose = forwardRef<HTMLElement, ProseProps>(({ tag: Tag = 'p', html, text, className }, ref) => {
    if (!html && !text) {
        return null;
    }

    if (html) {
        return (
            <div
                ref={ref as ForwardedRef<HTMLDivElement>}
                className={classNamesTailwind('prose max-w-none', className)}
                dangerouslySetInnerHTML={{ __html: html }}
            />
        );
    }

    return (
        <Tag ref={ref} className={className}>
            {text}
        </Tag>
    );
});

export default Prose;
