import React from 'react';
import {ComponentWrapper} from 'src/components';
import {FlexibleTextContainer, HtmlElement} from './flexibleText.styles';

export const FLEXIBLE_TEXT_NAME = 'Page_Sections_layout_Content_FlexibleText';

export const FLEXIBLE_TEXT_QUERY = `
  ${FLEXIBLE_TEXT_NAME} {
    fieldGroupName
    flexibleContentEn
    flexibleContentSp
  }
`;

interface FlexibleTextProps {
  language: string;
  flexibleContentEn: string;
  flexibleContentSp: string;
}

export const FlexibleText: React.FC<FlexibleTextProps> = ({
  language,
  flexibleContentEn,
  flexibleContentSp,
}): JSX.Element => {
  const createMarkup = () => {
    return language === 'english' ? {__html: flexibleContentEn} : {__html: flexibleContentSp};
  };

  return (
    <ComponentWrapper>
      <FlexibleTextContainer>
        <HtmlElement dangerouslySetInnerHTML={createMarkup()} />
      </FlexibleTextContainer>
    </ComponentWrapper>
  );
};

export default FlexibleText;