import React from 'react';
import {Container, Title} from './headlineColorBand.styles.ts';

export const HEADLINE_WITH_COLOR_NAME = 'Page_Sections_layout_Content_HeadlineWithColorBand';

export const HEADLINE_WITH_COLOR_QUERY = `
  ${HEADLINE_WITH_COLOR_NAME} {
    bandColor
    fieldGroupName
    headlineTextEs
    headlineTextEn
    alignment
  }
`;

interface HeadlineWithColorProps {
  headlineTextEn?: string;
  headlineTextEs?: string;
  language: string;
  bandColor?: string;
  alignment?: string;
}

export const HeadlineWithColorBand: React.FC<HeadlineWithColorProps> = ({
  headlineTextEn,
  headlineTextEs,
  bandColor,
  alignment,
  language,
}): JSX.Element => {
  const title = language === 'english' ? headlineTextEn : headlineTextEs;
  const align = alignment == '' ? 'left' : alignment;

  let color = '#ffffff';
  let textColor = '#000000';

  switch (bandColor) {
    case 'Yellow':
      color = '#F0EC74';
      textColor = '#000000';
      break;
    case 'Orange':
      color = '#FF9E1B';
      textColor = '#ffffff';
      break;
    case 'Sky':
      color = '#BBDDE6';
      textColor = '#000000';
      break;
    case 'Navy':
      color = '#002B49';
      textColor = '#ffffff';
      break;
    default:
      color = '#ffffff';
      textColor = '#000000';
      break;
  }

  return (
    <Container>
      <Title alignment={align} textColor={textColor} color={color}>
        {title}
      </Title>
    </Container>
  );
};

export default HeadlineWithColorBand;