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

export interface BoldTitleProps {
    title?: string;
    html?: string | null;
    as?: ElementType;
    className?: string;
}

const BoldTitle = ({ as: Tag = 'h3', html, title, className }: BoldTitleProps) => {
    if (!html && !title) {
        return null;
    }

    if (html) {
        return <Tag className={classNamesTailwind(className)} dangerouslySetInnerHTML={{ __html: html }} />;
    }

    return <Tag className={classNamesTailwind(className)}>{title}</Tag>;
};

export default BoldTitle;
