import React from "react";
import styled from "styled-components";

const Container = styled.div`
  /* make it full height and width */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* layout three rows: navbar, content, and footer */
  display: grid;
  grid-template-rows: auto 1fr auto;
`;

const Navbar = styled.nav`
  background: darkred;

  /* center the inner container */
  display: flex;
  justify-content: center;
`;

const NavbarContainer = styled.div`
  background: red;

  /* as wide as it can be, but not too wide */
  width: 100%;
  max-width: 480px;
`;

const Content = styled.div`
  background: darkblue;

  /* center the inner container */
  display: flex;
  justify-content: center;
`;

const ContentContainer = styled.div`
  background: blue;

  /* as wide as it can be, but not too wide */
  width: 100%;
  max-width: 480px;
`;

const Footer = styled.footer`
  background: grey;

  /* make footer stick to the bottom */
  grid-row-start: 3;
  grid-row-end: 4;

  /* center the inner container */
  display: flex;
  justify-content: center;
`;

const FooterContainer = styled.div`
  background: darkgrey;

  /* as wide as it can be, but not too wide */
  width: 100%;
  max-width: 480px;
`;

export default () => (
  <Container>
    <Navbar>
      <NavbarContainer>Nav stuff here</NavbarContainer>
    </Navbar>
    <Content>
      <ContentContainer>Content stuff here</ContentContainer>
    </Content>
    <Footer>
      <FooterContainer>My footer here</FooterContainer>
    </Footer>
  </Container>
);