import React from 'react';
import { Text } from '@rebass/emotion';
import { HTMLService } from 'lib';
import { FluidContainer } from 'utils/styles/mixins';

import { getColumnSize } from 'utils/styles/grid';
import { TextModuleProps } from '../../text-module.types';

import * as Styles from './begonia-default-styles'

const BegoniaCenter = ({ data }: TextModuleProps): JSX.Element => {
  const { text, heading, alignment} = data;
  const positions: {[key: string]: string} = {
    centered: 'center',
    left: 'flex-start',
    right: 'flex-end'
  };
  return (
    <FluidContainer>
      <Styles.TextContainer alignment={positions[alignment]}>
        {heading &&
          <Text
            as="h2"
            width={[1, 1, `${getColumnSize(8)}px`]}
            fontSize={[7, 7, 8]}
            lineHeight={[7, 7, 8]}
          >
          {heading}
          </Text>
        }
        <Styles.HTMLBlock
          width={[1, 1, `${getColumnSize(8)}`]}
          dangerouslySetInnerHTML={{
            __html: HTMLService.htmlFromMarkdown(text)
          }}
        />
      </Styles.TextContainer>
    </FluidContainer>
  );
};

export default BegoniaCenter;