import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FileFilled, MenuOutlined, SlackOutlined, } from '@ant-design/icons';
import { Dropdown, Layout, Menu } from 'antd';
import { useMediaQuery } from 'react-responsive';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { StyledMenu, StyledMenuButton, StyledMenuItem } from './Menu';
import { RunOnCubeCloud } from './RunOnCubeCloud';
const StyledHeader = styled(Layout.Header) `
  && {
    background-color: var(--dark-02-color);
    color: white;
    padding: 0 16px;
    line-height: 44px;
    height: 48px;
  }
`;
export default function Header({ selectedKeys }) {
    const isDesktopOrLaptop = useMediaQuery({
        query: '(min-width: 992px)',
    });
    const isMobileOrTable = useMediaQuery({
        query: '(max-width: 991px)',
    });
    return (_jsxs(StyledHeader, { children: [_jsx("div", { style: { float: 'left' }, children: _jsx("img", { src: "./cube-logo.svg", style: { height: 28, marginRight: 28 }, alt: "" }) }), isDesktopOrLaptop && (_jsxs(StyledMenu, { theme: "light", mode: "horizontal", selectedKeys: selectedKeys, children: [_jsx(StyledMenuItem, { children: _jsx(Link, { to: "/build", children: "Playground" }) }, "/build"), _jsx(StyledMenuItem, { children: _jsx(Link, { to: "/schema", children: "Data Model" }) }, "/schema"), _jsx(StyledMenuItem, { children: _jsx(Link, { to: "/frontend-integrations", children: "Frontend Integrations" }) }, "/frontend-integrations"), _jsx(StyledMenuItem, { children: _jsx(Link, { to: "/connect-to-bi", children: "Connect to BI" }) }, "/connect-to-bi"), _jsxs(StyledMenuButton, { href: "https://slack.cube.dev", target: "_blank", children: [_jsx(SlackOutlined, {}), "Slack"] }, "slack"), _jsxs(StyledMenuButton, { href: "https://cube.dev/docs", target: "_blank", children: [_jsx(FileFilled, {}), "Docs"] }, "docs"), _jsx(RunOnCubeCloud, {})] })), isMobileOrTable && (_jsx("div", { style: { float: 'right' }, children: _jsx(Dropdown, { overlay: _jsxs(Menu, { children: [_jsx(Menu.Item, { children: _jsx(Link, { to: "/build", children: "Playground" }) }, "/build"), _jsx(Menu.Item, { children: _jsx(Link, { to: "/schema", children: "Data Model" }) }, "/schema")] }), children: _jsx(MenuOutlined, {}) }) }))] }));
}
//# sourceMappingURL=Header.js.map