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;
    subtitleAs?: ElementType | null;
    className?: string;
    classNameTitle?: string;
    classNameSubtitle?: string;
}

const Heading = ({
    titleAs = 'h3',
    className,
    classNameTitle,
    classNameSubtitle,
    title,
    titleHtml,
    subtitle,
    subtitleAs: SubtitleTag = 'h4'
}: 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 && <SubtitleTag className={classNamesTailwind('order-1 mb-6 md:mb-8', classNameSubtitle)}>{subtitle}</SubtitleTag>}
        </div>
    );
};

export default Heading;
