import React from 'react';

import Container from './Container';
import { Link } from '../../styles/components/shared/Link.style';
import { ButtonContainer } from '../../styles/components/shared/Button.style';
import PrismicLinkComponent from '../PrismicLink';
import { PrismicLink } from 'easy-prismic-react';

interface Props {
  title: string;
  tagline: string;
  contactLabel?: string;
  funnelLabel: string;
  CTALink?: PrismicLink;
}

const BlockCTA: React.FC<Props> = ({ title, tagline, contactLabel, funnelLabel, CTALink }) => (
  <Container color="blue">
    <h2 className="no-margin">{title}</h2>
    <p className="text-center mb">
      {tagline}
    </p>
    <ButtonContainer>
      {!!contactLabel &&
      <Link
        id="easyblue-contact-home-bot"
        href="mailto:support@easyblue.io"
        onClick={event => {
          if ((window as any).Intercom && !!document.querySelector('#intercom-frame')) {
            event.preventDefault();
          }
        }}
        button
        large
        display="inline-block"
        color="white">
        {contactLabel}
      </Link>}
      <PrismicLinkComponent
        link={CTALink}
        linkProps={{
          button: true,
          large: true,
          display: 'inline-block',
          color: 'yellow'
        }}
      >
        {funnelLabel}
      </PrismicLinkComponent>
    </ButtonContainer>
  </Container>
);

export default BlockCTA;