import type { FC } from 'react';
import React from 'react';

const CLASSNAME = 'PageTitle';
const CLASSNAME_TITLE = `${CLASSNAME}-title`;
const CLASSNAME_TYPE = `${CLASSNAME}-type`;

interface PageTitleProps {
    children?: React.ReactNode;
    title?: string | JSX.Element;
    type?: string | JSX.Element;
    subtitle?: string | JSX.Element;
}

const PageTitle: FC<PageTitleProps> = ({ title, type, subtitle, children }) => (
    <div className={CLASSNAME} data-testid={CLASSNAME}>
        {type && <div className={CLASSNAME_TYPE}>{type}</div>}
        <h3 className={CLASSNAME_TITLE}>
            {title}
            {children}
        </h3>
        {subtitle}
    </div>
);

export default PageTitle;