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

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

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

  ${min('laptop')} {
    padding-left: 20px;
  }
`;

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

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

export default Header;