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

const HeaderContent = styled(Flex)`
  flex-direction: row;
  justify-content: space-between;
  ${'' /* align-items: flex-start; */}

  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-secondary) 50%,
    var(--color-tertiarty) 100%
  );

  ${'' /* height: 70px; */}
  padding: 10px 12px;
  ${min('laptop')} {
    padding: 10px 12px;
    padding-left: 20px;
  }
`;

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

const Header = () => (
  <Wrapper>
    <HeaderContent>
      <Logo />
      <Auth />
    </HeaderContent>
  </Wrapper>
);

export default Header;