import * as React from 'react';
import {HTMLProps, SFC} from 'react';
import {Col, Row} from 'reactstrap';
import {Icon, Layout, LayoutProps} from './../';

export interface PageHeaderProps extends HTMLProps<HTMLDivElement> {
  hideBackButton?: boolean;
  title: string;
  onClickBackButton?: () => void;
}

export const PageHeader: SFC<PageHeaderProps> = ({
  children,
  hideBackButton,
  title,
  onClickBackButton,
  ...otherProps}: PageHeaderProps) => (

  <header className="page-comp-header" {...otherProps}>
    <Row>
      <Col>
        <div className="page-comp-header-left">
          {!hideBackButton && (
            <button
              className="btn btn-link btn-icon btn-square"
              title="Go back"
              onClick={onClickBackButton}
            >
              <Icon name="arrow_back" />
            </button>
          )}

          <h1 className="page-comp-title">{title}</h1>
        </div>
      </Col>
      <Col>
        <div className="page-comp-header-right">
          {children}
        </div>
      </Col>
    </Row>
  </header>
);

PageHeader.displayName = 'PageHeader';

PageHeader.defaultProps = {
  hideBackButton: false,
  onClickBackButton: () => { return; },
};