import React, { ReactElement } from 'react';
import classname from 'classnames'

export interface PageHeaderProps {
    title?: string | ReactElement,
    titleStyle?: React.CSSProperties,
    titleIcon?: ReactElement,
    extra?: string | ReactElement,
    style?: React.CSSProperties,
    className?: string,
}

export const PageHeader: React.FunctionComponent<PageHeaderProps> = (props) => {
    const { title, children, extra, titleIcon, style = {}, titleStyle = {}, className = ''} = props;
    return (
        <div className={classname("jad-page-layout1-header", className)} style={style} id="page-header">
            {(title || extra) && <div className={"title-block"}>
                {
                    title && (
                        <div className={'title'} style={titleStyle}>
                            {titleIcon && <span className={'title-icon'}>{titleIcon}</span>}
                            {title}
                        </div>
                    )
                }
                {
                    extra && (
                        <div className={'extra'}>
                            {extra}
                        </div>
                    )
                }
            </div>}
            { children }
        </div>
    )
};