import PropTypes from 'prop-types';
import cx from "../../../utils/css/cx.js";
import IfActive from "../../application/IfActive/index.js";
import ModuleEyebrow from '../ModuleEyebrow';
import ModuleLastUpdated from '../ModuleLastUpdated';
import ReporterNote from '../ReporterNote';
import Headline from './Headline';
import Description from './Description';
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const PageTitle = function PageTitle(props) {
  const {
    headline,
    eyebrow,
    description,
    reporterNote,
    layout,
    disableMargins
  } = props;
  const trackingOpts = {
    context: 'PageTitle'
  };
  return <div className={cls('container', {
    disableMargins
  })}>
      <div className={classes.timestamp}>
        <ModuleLastUpdated scope="page" />
      </div>
      <ModuleEyebrow {...eyebrow} tracking={trackingOpts} />
      <div className={layout === 'vertical' ? classes.vertical : classes.horizontal}>
        <div>
          <Headline text={headline} />
          <Description text={description} />

        </div>
        <IfActive active={reporterNote}>
          <div className={classes.comment}>
            <ReporterNote layout="vertical-bottom" size="large" {...reporterNote} />
          </div>
        </IfActive>

      </div>
    </div>;
};
PageTitle.defaultProps = {
  eyebrow: {},
  description: undefined,
  reporterNote: undefined,
  layout: 'vertical',
  disableMargins: false
};
PageTitle.propTypes = {
  /**
   * The headline of the page
   */
  headline: PropTypes.string.isRequired,
  /**
   * The page eyebrow configuration, to be passed to `ModuleEyebrow`
   */
  eyebrow: PropTypes.shape({
    text: PropTypes.string
  }),
  /**
   * The description of the page
   */
  description: PropTypes.string,
  /**
   * The reporter note, to be passed to `ReporterNote`
   */
  reporterNote: PropTypes.shape({
    attribution: PropTypes.shape({}),
    lastUpdated: PropTypes.string,
    layout: PropTypes.string,
    text: PropTypes.string
  }),
  /**
   * Specify the layout
   */
  layout: PropTypes.oneOf(['vertical', 'horizontal']),
  /**
   * Only render the content with no padding/margins
   */
  disableMargins: PropTypes.bool
};
export default PageTitle;