import React from 'react';
import { css } from '@emotion/core';
import { Text, Flex } from '@rebass/emotion';

import Image from 'components/Image';

import typography from 'utils/typography';
import { FluidContainer } from 'utils/styles/mixins';
import * as Styles from './centre-float-overlap.styles';

import { HeroComponentProps } from '../../hero-module.types';

const HeaderCentreFloatOverlap = (props: HeroComponentProps): JSX.Element => (
  <Styles.HeroWrapper>
    <Styles.HeroModuleWrapper as="figure">
        <Image
          fluid={props.data.images[0]}
          css={Styles.HeroImage}
        />
        <Styles.HeroContent>
          <FluidContainer>
            <Flex justifyContent="center">
              <div
                css={css`
                  ${Styles.HeroContentInner}
                  background-color: ${props.bgColour};
                `}
              >
                <Text
                  as="h1"
                  fontSize={[7, 8]}
                  lineHeight={[7, 8]}
                  mb={[0]}
                  color={props.themeConfig.titleTextColour}
                >
                  {props.data.titleText}
                </Text>
                {props.data.subTitleText &&
                  <Text
                    as="p"
                    fontSize={[0, 1]}
                    lineHeight={[0, 1]}
                    mb={[0, 1]}
                    fontFamily={typography.options.bodyFontFamily!.join()}
                    color={props.themeConfig.titleTextColour}
                  >
                    {props.data.subTitleText}
                  </Text>
                }
                <Text
                  fontSize={[2, 3]}
                  lineHeight={[2, 3]}
                  color={props.themeConfig.bodyTextColour}
                >
                  {props.data.bodyText}
                </Text>
              </div>
            </Flex>
          </FluidContainer>
        </Styles.HeroContent>
    </Styles.HeroModuleWrapper>
  </Styles.HeroWrapper>
);

export default HeaderCentreFloatOverlap;