import React from "react";
import { StyleSheet, Text } from "react-native";
import Colors from "../../../../Components/common/Colors";

const BoldText = (props) => {
  var arr = props.text.split(" ");
  const reducer = (acc, cur, index) => {
    let prevVal = acc[acc.length - 1];
    if (prevVal && prevVal.startsWith("<b>") && !prevVal.endsWith("</b>")) {
      acc[acc.length - 1] = prevVal + " " + cur;
    } else {
      acc.push(cur);
    }
    return acc;
  };
  var text = arr.reduce(reducer, []);
  return (
    <Text style={[styles.instructionText, props.style]}>
      {text.map((text, index) => {
        if (text.startsWith("<b>")) {
          return (
            <Text
              key={index}
              style={[
                styles.instructionText,
                { fontFamily: "Muli-Black", color: props.boldTextColor },
              ]}
            >
              {text.replace("<b>", "").replace("</b>", "")}{" "}
            </Text>
          );
        }
        return `${text} `;
      })}
    </Text>
  );
};

export default BoldText;

const styles = StyleSheet.create({
  instructionText: {
    marginHorizontal: 10,
    color: Colors.white,
    fontFamily: "Muli-Regular",
    fontSize: 13,
  },
});
