import { h } from 'preact'
import { bool } from 'prop-types'
import { Link } from 'react-router-dom'

import { H1 } from '../../components/Text'
import {
  Wrapper,
  Content,
  Hero,
  FadeTop,
  PositionedLink,
} from './styles'

import Header from '../../components/Header'
import { ImageLogo } from '../../components/Logo'

const InfoLayout = ({ title, subtitle, image, children, theme }) => (
  <Wrapper theme={theme}>
    <PositionedLink to="/" theme={theme}>
      <ImageLogo />
    </PositionedLink>
    <Content>
      {children}
    </Content>
    <Hero image={image}>
      <Header theme={{ foreground: theme.background, background: 'transparent', }} miniHeader />
      <H1>{title}</H1>
      <H1
        css={`
            max-width: 50%;
          `}
      >
        {subtitle}
      </H1>
      <FadeTop colour={theme.foreground} />
    </Hero>
  </Wrapper>
)

export default InfoLayout