import React from 'react'
import styled, { ThemeProvider, createGlobalStyle } from 'styled-components'
import Header from './Header'
import Meta from './Meta'

const theme = {
  red: '#FF0000',
  black: '#393939',
  grey: '#545454',
  lightgrey: '#E1E1E1',
  offWhite: '#EDEDED',
  maxWidth: '1000px',
  bs: '0 12px 24px 0 rgba(0,0,0,0.09)'
}

const StyledPage = styled.div`
  background: white;
  color: ${props => props.theme.black};
`

const Inner = styled.div`
  max-width: ${props => props.theme.maxWidth};
  margin: 0 auto;
  padding: 2rem;
`

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'roboto';
    src: url('/static/Roboto-Thin.woff2');
  }
  @font-face {
    font-family: 'roboto_mono';
    src: url('/static/RobotoMono-Thin.woff2');
  }
  @font-face {
    font-family: 'roboto_black';
    src: url('/static/Roboto-Black.woff2');
  }
  
  html {l
    box-sizing: border-box;
    font-size: 10px;
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }

  body {
    padding: 0;
    margin: 0;
    font-size: 1.5rem;
    line-height: 2;
    font-family: 'roboto', sans-serif;
  }

  a {
    text-decoration: none;
    color: ${theme.black};
  }

  button {
    font-family: 'roboto_black';
  }

  input,
  textarea {
    font-family: 'roboto';
    border: 1px solid ${props => props.theme.lightgrey};
    padding: 6px;
    margin: 0 8px;
  }
`

class Page extends React.Component {
  render () {
    return (
      <ThemeProvider theme={theme}>
        <StyledPage>
          <Meta />
          <GlobalStyle />
          <Header />
          <Inner>{this.props.children}</Inner>
        </StyledPage>
      </ThemeProvider>
    )
  }
}

export default Page