/* eslint-disable import/no-unresolved */
import styled from 'styled-components';
import { min } from 'styles/mq';
import { Flex } from 'ui';
import Auth from './Auth';
import Logo from './Logo';

const HeaderContent = styled(Flex)`
  flex-direction: row;
  justify-content: space-between;

  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;
`;

function Header() {
  return (
    <Wrapper>
      <HeaderContent>
        <Logo />
        <Auth />
      </HeaderContent>
    </Wrapper>
  );
}

export default Header;