import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {
  CardContainer,
  HtmlRender,
  MarkdownContent,
  Typography,
} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  content: Nullable<string>;
  title?: string;
}

const HTML_TAG_REGEX = /<[a-z][\s\S]*>/i;

export function RulesContent({content, title}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();

  if (!content) {
    return null;
  }

  const isHtml = HTML_TAG_REGEX.test(content);
  const headerText = title ?? t('sportsPool.rules_tab.scoring_system');

  return (
    <View style={styles.container}>
      <Typography variant="s" weight="semiBold">
        {headerText}
      </Typography>
      <CardContainer>
        {isHtml ? (
          <HtmlRender
            html={content}
            baseStyle={{
              ...styles.htmlBase,
              color: theme.text.neutral.lighter,
            }}
          />
        ) : (
          <MarkdownContent content={content} />
        )}
      </CardContainer>
    </View>
  );
}