import React from 'react';
import { URLService } from 'lib';
import { Text, Flex } from '@rebass/emotion';

import Button from 'components/button';
import theme from 'utils/theme';

import { CallToActionProps } from './call-to-action-module.types';
import { FluidContainer } from 'utils/styles/mixins';

const CallToAction = ({ data }: CallToActionProps): JSX.Element => {
  const {
    buttonText,
    buttonUrl,
    callToActionText,
    internalPage,
    isExternal
  } = data;

  const hasHeading = callToActionText !== '';
  const url = isExternal ? buttonUrl : internalPage.fields.slug;

  return (
    <FluidContainer>
      <Flex
        flexDirection="column"
        alignItems="center"
      >
        {hasHeading && (
          <Text
            fontSize={theme.fontSizes[3]}
            mb={theme.space[3]}
            color={theme.colors.textDark}
          >
            {callToActionText}
          </Text>
        )}
        <Button
          isInternal={!isExternal}
          url={url}
        >
          {buttonText}
        </Button>
      </Flex>
    </FluidContainer>
  );
};

export default CallToAction;