import type { FC } from 'react';
import React from 'react';
import { formatMessage } from '@theorchard/suite-i18n';
import cx from 'classnames';
import PageHeaderTitle from '../pageTitle/pageTitle';

const CLASSNAME = 'PageHeader';

interface Props {
    children?: React.ReactNode;
    className?: string;
    testId?: string;
    title?: string;
}

const PageHeader: FC<Props> = ({ children, className, testId, title }) => (
    <div className={cx(CLASSNAME, className)} data-testid={testId || CLASSNAME}>
        {title && <PageHeaderTitle title={formatMessage(title)} />}
        {children}
    </div>
);

export default PageHeader;