import React from 'react';
import styled from 'styled-components';
import { Box, Card, Flexbox, Media, PageWrapper, Separator, Typography } from '../..';
import { isElement } from '../../common/utils';
var StyledCard = styled(Card).withConfig({
  displayName: "PageHeaderCard__StyledCard",
  componentId: "sc-14wtht9-0"
})(["background:", ";border-bottom:1px solid ", ";border-radius:0;"], function (p) {
  return p.theme.color.pageHeaderBackground;
}, function (p) {
  return p.theme.color.headerCardBorder;
});
export var PageHeaderCard = function PageHeaderCard(_ref) {
  var title = _ref.title,
    className = _ref.className,
    children = _ref.children,
    grow = _ref.grow;
  var pageHeaderTitle = function pageHeaderTitle() {
    if (isElement(title)) {
      return title;
    }
    return React.createElement(Typography, {
      type: "title1",
      as: "h1"
    }, title);
  };
  return React.createElement(StyledCard, {
    className: className,
    grow: grow
  }, React.createElement(PageWrapper, null, React.createElement(Flexbox, {
    container: true,
    gap: 0,
    direction: "column",
    sm: {
      direction: 'row',
      justifyContent: 'space-between',
      alignItems: 'center'
    }
  }, React.createElement(Flexbox, {
    item: true
  }, React.createElement(Box, {
    p: 3,
    sm: {
      px: 0,
      py: 2
    }
  }, pageHeaderTitle())), children && React.createElement(Media, {
    query: function query(t) {
      return t.media.lessThan(t.breakpoints.sm);
    }
  }, React.createElement(Flexbox, {
    item: true
  }, React.createElement(Separator, null))), children && React.createElement(Flexbox, {
    item: true
  }, React.createElement(Box, {
    px: 3,
    sm: {
      px: 0
    }
  }, children)))));
};