import React, {
  ReactElement
} from 'react'
import styled from 'styled-components'

import {
  MediaQuery
} from "../../common/helpers/MediaQuery"
import {
  DefaultInterface
} from "../../common/helpers/Theme"
import {
  CustomComponent
} from "../../core"

import {
  Div
} from '../../core/Div'

const ContentBase: React.FunctionComponent<DefaultInterface> = (props): ReactElement => {
  const {
    children
  } = props

  const newProps = Object.assign({}, {...props})

  delete newProps.children
  delete newProps.themed
  delete newProps.backgroundColor

  return <Div background {...newProps}>
    { children }
  </Div>
}

const Component: React.FunctionComponent<DefaultInterface> = styled(ContentBase)`
  margin: 0px auto;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  position: relative;
  height: auto;
  min-height: 100px;
  width: 100%;

  ${ MediaQuery.large } {
    width: 602px;
    margin-right: 15px;
    margin-bottom: 0px;
  }

  ${ MediaQuery.xlarge } {
    width: 858px;
    flex-direction: row;
  }

  ${ MediaQuery.xxlarge } {
    width: 1024px;
  }
`

export const Content: React.FunctionComponent<DefaultInterface> = (contentProps): ReactElement => <CustomComponent {...contentProps} callback={(props: DefaultInterface) => <Component {...props} />} className="content" />