import { h } from 'preact'
import { bool } from 'prop-types'

import { H1, Label } from '../../components/Text'
import {
  Wrapper,
  TaglineContainer,
  Content,
  Hero,
  FadeBottom,
} from './styles'

import { colours } from '../../assets/theme'
import { NdcLogo, RFLogo } from '../../components/Logo'

const InfoLayout = ({ title, subtitle, image, children, theme }) => {
  console.log({ theme })
  return (
    <Wrapper theme={theme}>
      <Content>
        {children}
      </Content>
      <Hero image={image}>
        <div>
          <H1>{title}</H1>
          <H1
            css={`
            max-width: 50%;
          `}
          >
            {subtitle}
          </H1>
        </div>
        <TaglineContainer>
          <a href="https://newdesigncongress.org/">
            <NdcLogo active colour={colours.offwhite} />
          </a>
          <Label size="24">{'//'}</Label>
          <a href="https://reclaimfutures.org/">
            <RFLogo active colour={colours.offwhite} />
          </a>
        </TaglineContainer>
        <FadeBottom />
      </Hero>
    </Wrapper>
  )
}

InfoLayout.propTypes = {
  loading: bool,
}

export default InfoLayout