import React from 'react';
import {Title} from './navigationSectionHeader.styles';

export const NAVIGATION_SECTION_HEADER_NAME = 'Page_Sections_layout_Content_NavigationSectionHeader';

export const NAVIGATION_SECTION_HEADER_QUERY = `
  ${NAVIGATION_SECTION_HEADER_NAME} {
    fieldGroupName
    titleEn
    titleEs 
    alignment
    typeHierarchy
    typeFamily
  }
`;

interface NavigationSectionHeaderProps {
  titleEn: string;
  titleEs: string;
  alignment: string;
  language: string;
  typeHierarchy: any;
  typeFamily: string;
}

export const NavigationSectionHeader: React.FC<NavigationSectionHeaderProps> = ({
  titleEn,
  titleEs,
  alignment,
  language,
  typeHierarchy,
  typeFamily
}): JSX.Element => {
  const title = language === 'english' ? titleEn : titleEs;

  const lowercaseTypeHierarchy = typeHierarchy.toLowerCase();


  const align = '' == alignment ? 'center' : alignment; // default an empty alignment to "center"

  return (
    <>
    <Title as={lowercaseTypeHierarchy} typeHierarchy={typeHierarchy[1]} typeFamily={typeFamily} alignment={align}>
      {title}
    </Title>
    <br/>
    </>
  );
};

export default NavigationSectionHeader;