import styled, { css } from "styled-components"

const flexSpaceBetween = css`
  display: flex;
  align-items: center;
  justify-content: space-between;
`
const flexColumn = css`
  display: flex;
  flex-direction: column;
`
const centerAlign = css`
  display: flex;
  align-items: center;
`
// const fullWidth = css`
//   max-width: 9999999px;
// `
const paddingCss = css`
  padding: 0 20px;
  @media screen and (max-width: 480px){
    padding: 0 10px;
  }
`

export default styled.section`
    max-width: ${(props) => (props as any).maxWidth || 1200}px;
    width: ${(props) => (props as any).width ? `${(props as any).width}px` : "auto"};
    margin: 0 auto;
    box-sizing: border-box;
    ${(props) => (props as any).flexSpaceBetween ? flexSpaceBetween : ""}
    ${(props) => (props as any).flexColumn || (props as any).center ? flexColumn : ""}
    ${(props) => (props as any).centerAlign ? centerAlign : ""}
    ${(props) => (props as any).noPadding ? "" : paddingCss};
`