import colors from 'client/UIKit/colors';
import { Flex } from 'client/UIKit/grid';
import mq from 'client/UIKit/mq';
import styled from 'styled-components';
import Auth from './Auth';
import Logo from './Logo';

const HeaderContent = styled(Flex)`
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  background: ${`linear-gradient(90deg,
    ${colors.primary} 0%,
    ${colors.secondary} 50%,
    ${colors.tertiary} 100%)`};
  padding: 10px 12px;
  ${mq.laptop`
    padding-left: 20px;
    flex-direction: row;
  `}
`;

const Header = styled.header`
  position: sticky;
  top: 0;
  z-index: 999999;
`;

export default () => (
  <Header>
    <HeaderContent alignItems="center">
      <Logo />
      <Auth />
    </HeaderContent>
  </Header>
);
