import React from "react";
import Logo from "../components/Logo.js";
import HeaderMenu from "../components/HeaderMenu.js";
import styled from "styled-components";

const HeaderContainer = styled.header`
  background-color: ${props => props.theme.header.background};
  min-height: 6.25rem;
  padding: 1rem;
  box-sizing: border-box;
`;

const HeaderContent = styled.div`
  margin: 0 auto;
  width: 100%;
  max-width: 60rem;
  display: flex;
  align-content: space-between;
  place-content: space-between;
  align-items: center;
`;

const Header = () => (
  <HeaderContainer>
    <HeaderContent>
      <Logo />
      <HeaderMenu />
    </HeaderContent>
  </HeaderContainer>
);

export default Header;