import React, { ReactNode } from 'react';
import cx from 'classnames';
import { PrintButton } from 'app/shared/containers/print/printButton';
import * as Text from 'app/shared/components/text/text';

interface Props {
  hasPrintButton?: boolean,
  headline: string,
  line1?: string,
  line2?: string,
  children?: ReactNode,
}

export const SubHeader = ({ hasPrintButton, children, headline, line1, line2 }: Props) => {

  const subHeaderClassName = cx(
    'c-sub-header o-layout u-flex-column ',
    { 'c-sub-header__with-one-line': line1 && !line2 },
    { 'c-sub-header__with-two-lines': line1 && line2 }
  );

  return (
    <div className={subHeaderClassName}>
      <div className="c-sub-header__container o-layout o-layout--space-between o-layout--aligned">
        <div className='o-layout o-layout__item'>
          <Text.Headline size="h1" extraClass='c-sub-header__headline'>{headline}</Text.Headline>
        </div>
        <div className='o-layout o-layout__item u-justify-content-end'>
          {hasPrintButton && <PrintButton />}
          {children}
        </div>
      </div>
      {line1 &&
      <div className='o-gutter-left o-main-column o-layout o-layout--space-between o-gutter-bottom o-gutter-lg-bottom--none u-flex-column u-margin-top--small'>
        <Text.Paragraph size="small" extraClass="u-margin-bottom--none u-margin-lg-bottom--small">{line1}</Text.Paragraph>
        {line1 && <Text.Paragraph size="small">{line2}</Text.Paragraph>}
      </div>
      }
    </div>
  );
};