import React from 'react';
import {PrimaryButtonLightLink} from 'src/components';
import {FullWidthBlueTriangle} from '../colorBlocks/colorBlocks.styles';
import {PreintakeWrapper, PreintakeContainer, CopyContainer, Title, Description} from './preintakeCta.styles';

export interface PreintakeCtaProps {
  buttonLink: string;
  buttonTextEn: string;
  buttonTextSp: string;
  descriptionEn: string;
  descriptionSp: string;
  titleEn: string;
  titleSp: string;
  subtitleEn: string;
  subtitleSp: string;
  language: string;
}

export const PreintakeCta: React.FC<PreintakeCtaProps> = ({
  buttonLink,
  buttonTextEn,
  buttonTextSp,
  descriptionEn,
  descriptionSp,
  titleEn,
  titleSp,
  language,
}): JSX.Element => {
  const title = language === 'english' ? titleEn : titleSp;
  const description = language === 'english' ? descriptionEn : descriptionSp;
  const buttonText = language === 'english' ? buttonTextEn : buttonTextSp;

  return (
    <PreintakeWrapper>
      <PreintakeContainer>
        <CopyContainer>
          <Title>{title}</Title>
          <Description>{description}</Description>
        </CopyContainer>
        <PrimaryButtonLightLink href={buttonLink}>{buttonText}</PrimaryButtonLightLink>
      </PreintakeContainer>
      <FullWidthBlueTriangle></FullWidthBlueTriangle>
    </PreintakeWrapper>
  );
};

export default PreintakeCta;