import { Fragment, h } from 'preact'
import PropTypes, { oneOfType, shape, string } from 'prop-types'

import SEO from '../../components/Seo'

import Header from '../../components/Header'
import { capitaliseFirstLetter } from '../../helpers/string'
import { defaultTheme } from '../../assets/theme'
import { ThemedBlock } from './styles'

const Page = ({ children, title = '', description, metaImg, backTo, noindex, withHeader = true, theme = defaultTheme }) => (
  <Fragment>
    <SEO
      title={title.toLowerCase() === 'index' ? title : capitaliseFirstLetter(title)}
      description={description}
      metaImg={metaImg}
      noindex={noindex}
    />
    {withHeader ? <Header theme={theme} /> : null}
    <ThemedBlock theme={theme} withHeader={withHeader}>
      {children}
    </ThemedBlock>
  </Fragment>
)

Page.propTypes = {
  children: PropTypes.node.isRequired,
  title: oneOfType([
    string,
    shape({
      en: string,
      fr: string,
    }),
  ]),
  description: string,
  metaImg: string,
}

export default Page
