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

import {
  CustomComponent
} from "../../core"

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

interface PageInterface {
  children: ReactElement | ReactElement[] | string
  themed?: boolean
}

const PageBase: React.FunctionComponent<PageInterface> = (props): ReactElement => {
  const {
    children
  } = props

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

  delete newProps.children
  delete newProps.themed

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

const Component: React.FunctionComponent<PageInterface> = styled(PageBase)`
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;

  > * {
    flex: 1;
  }
`

export const Page: React.FunctionComponent<PageInterface> = (pageProps): ReactElement => <CustomComponent {...pageProps} callback={(props: PageInterface) => <Component {...props} />} />