import * as React from "react"
import styled, { withTheme } from "styled-components"

const Container = withTheme(styled.div`
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  background-color: ${(props) => props.theme.pumpkin};
  position: relative;
  background-clip: padding-box;
  // box-shadow: 0 0px 24px rgba(0, 0, 0, 0.1);
  // border-bottom: 1px solid rgba(0, 0, 0, 0.15);
`)

const ViewPort = withTheme(styled.div`
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  height: 70px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  @media screen and (max-width: 950px) {
    padding: 10px;
    height: 55px;
  }
`)

const Section = styled.div`
  display: flex;
  align-items: center;
`

// legacy
const TriSectionContainer = styled(Container)`
  display: flex;
  justify-content: center;
  max-width: 1180px;
  position: relative;
  margin: auto;
`

const Primary = (props) => {
  return (
    <Container {...props} >
      <ViewPort>
        {props.children}
      </ViewPort>
    </Container>
  )
}

export {
  Primary,
  Container,
  TriSectionContainer,
  ViewPort,
  Section
}