import React from 'react';
import { EmbedContainer } from '../../styles/components/blog/Post.style';
import { DiscoverEmbedData } from '../../typings/entities';
import RichText from '../RichText';
import PrismicLink from '../PrismicLink';

interface Props {
  shortCodeParams: any;
  postContext: any;
}

const DiscoverEmbed: React.FC<Props> = ({ shortCodeParams, postContext }) => {
  function getRelatedDiscoverEmbed(): DiscoverEmbedData {
    if (!shortCodeParams?.length || !postContext?.discover?.length) {
      return null;
    }
    const relatedIndex = parseInt(shortCodeParams[0]);
    if (isNaN(relatedIndex)) {
      return null;
    }
    return postContext?.discover[relatedIndex - 1];
  }

  const relatedDiscoverEmbed = getRelatedDiscoverEmbed();

  if (!relatedDiscoverEmbed) {
    return null;
  }

  return (
    <EmbedContainer>
      <RichText content={relatedDiscoverEmbed.discover_text} Component={'h2'} removeParagraphs/>
      <PrismicLink
        link={relatedDiscoverEmbed.discover_cta_link}
        linkProps={{
          button: true,
          small: true,
          display: 'inline-block',
          color: 'yellow'
        }}
      >
        {relatedDiscoverEmbed.discover_cta_label}
      </PrismicLink>
    </EmbedContainer>
  );
};

export default DiscoverEmbed;