import React from 'react';
import styled from 'styled-components';
import { Icon, Space, IconButton, Heading, Header as SemanticHeader } from '@looker/components';
import { LookerLogo } from '@looker/icons';
import { Menu } from '@styled-icons/material/Menu';
import { Link } from '../Link';
import { SelectorContainer } from '../SelectorContainer';
export var HEADER_REM = 4;
export var HEADER_TOGGLE_LABEL = 'Toggle Navigation';
export var HeaderLayout = _ref => {
  var {
    className,
    spec,
    toggleNavigation
  } = _ref;
  return React.createElement(SemanticHeader, {
    height: "".concat(HEADER_REM, "rem"),
    className: className,
    pl: "small",
    pr: "large"
  }, React.createElement(Space, null, React.createElement(IconButton, {
    size: "small",
    onClick: () => toggleNavigation(),
    icon: React.createElement(Menu, null),
    "aria-label": "nav toggle",
    label: HEADER_TOGGLE_LABEL
  }), React.createElement(Link, {
    to: "/".concat(spec.key)
  }, React.createElement(Space, {
    gap: "small"
  }, React.createElement(Icon, {
    icon: React.createElement(LookerLogo, null),
    alt: "Looker",
    color: "text5",
    style: {
      width: '82px'
    }
  }), React.createElement(Heading, {
    color: "key"
  }, "API Explorer")))), React.createElement(SelectorContainer, {
    spec: spec
  }));
};
export var Header = styled(HeaderLayout).withConfig({
  displayName: "Header",
  componentId: "sc-1mlhas2-0"
})(["border-bottom:1px solid ", ";"], _ref2 => {
  var {
    theme
  } = _ref2;
  return theme.colors.ui2;
});
//# sourceMappingURL=Header.js.map