import React 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 = ({ tag: Tag = 'p', html, text, className }: ProseProps) => {
    if (!html && !text) {
        return null;
    }

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

    return <Tag className={className}>{text}</Tag>;
};

export default Prose;
