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

export interface HeadingProps {
    title?: string;
    titleHtml?: string | null;
    titleAs?: ElementType | null;
    subtitle?: string | null;
    className?: string;
    classNameTitle?: string;
    classNameSubtitle?: string;
}

const Heading = ({ titleAs = 'h3', className, classNameTitle, classNameSubtitle, title, titleHtml, subtitle }: HeadingProps) => {
    return (
        <div className={classNamesTailwind('flex flex-col', className)}>
            <BoldTitle className={classNamesTailwind('order-2 mb-6 md:mb-8', classNameTitle)} title={title} html={titleHtml} as={titleAs} />
            {subtitle && <p className={classNamesTailwind('order-1 mb-6 md:mb-8', classNameSubtitle)}>{subtitle}</p>}
        </div>
    );
};

export default Heading;
