import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Translate from '../Translate';
import './style.scss';

const PageTitle = ({
    title,
    data,
    toState,
    additionalClass,
    badge,
    targetButton,
}) => {
    const pageTitleStyles = classNames('PageTitle', {
        PageTitle_link: toState,
    }, additionalClass);

    return (
        <div
            className={pageTitleStyles}
            role="presentation"
            onClick={() => toState && toState()}
        >
            <h1>
                <Translate tag={title} />
                {data}
            </h1>
            {badge && <div className="PageTitle__badge">{badge}</div>}
            {targetButton && <div className="PageTitle__button">{targetButton}</div>}
        </div>
    );
};

PageTitle.propTypes = {
    title: PropTypes.string.isRequired,
    data: PropTypes.string,
    toState: PropTypes.func,
    additionalClass: PropTypes.string,
    badge: PropTypes.node,
    targetButton: PropTypes.node,
};

PageTitle.defaultProps = {
    data: '',
    toState: null,
    additionalClass: '',
    badge: '',
    targetButton: '',
};

export default PageTitle;