import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["backLinkProps", "children", "title", "titleColor", "titleSuffix"];
import { IconArrowLeftSmallOutline } from '@teamleader/ui-icons';
import React from 'react';
import BadgedLink from '../badgedLink';
import { Box } from '../box';
import Container from '../container';
import Section from '../section';
import { Heading1, TextBody } from '../typography';
import theme from './theme.css';

var DetailPageHeader = function DetailPageHeader(_ref) {
  var backLinkProps = _ref.backLinkProps,
      children = _ref.children,
      title = _ref.title,
      _ref$titleColor = _ref.titleColor,
      titleColor = _ref$titleColor === void 0 ? 'teal' : _ref$titleColor,
      titleSuffix = _ref.titleSuffix,
      others = _objectWithoutProperties(_ref, _excluded);

  return /*#__PURE__*/React.createElement(Container, _extends({}, others, {
    element: Section
  }), /*#__PURE__*/React.createElement(Box, {
    className: theme['header-inner'],
    display: "flex"
  }, backLinkProps && /*#__PURE__*/React.createElement(TextBody, {
    className: theme['back-link']
  }, /*#__PURE__*/React.createElement(BadgedLink, _extends({}, backLinkProps, {
    icon: /*#__PURE__*/React.createElement(IconArrowLeftSmallOutline, null),
    inherit: false
  }))), /*#__PURE__*/React.createElement(Box, {
    flex: "1 0 200px",
    paddingTop: 5,
    overflow: "hidden"
  }, /*#__PURE__*/React.createElement(Box, {
    alignItems: "center",
    display: "flex"
  }, /*#__PURE__*/React.createElement(Heading1, {
    color: titleColor,
    maxLines: 1,
    tint: titleColor === 'neutral' ? 'dark' : 'darkest',
    title: typeof title === 'string' ? title : undefined
  }, title), titleSuffix && /*#__PURE__*/React.createElement(Box, {
    marginLeft: 3
  }, titleSuffix))), children && /*#__PURE__*/React.createElement(Box, {
    flex: "0 0 auto",
    display: "flex",
    paddingLeft: 7
  }, children)));
};

DetailPageHeader.displayName = 'DetailPage.Header';
export default DetailPageHeader;