const Heading = ({
  title = "",
  highlightWords = [],
  className = "relative text-4xl lg:text-5xl font-bold mb-16",
}) => {
  // Function to apply highlights to substrings
  const getHighlightedText = (text) => {
    if (!highlightWords.length) return text;

    let result = [];
    let lastIndex = 0;

    highlightWords.forEach(({ word, color }) => {
      let startIndex = text.indexOf(word);
      if (startIndex !== -1) {
        // Push text before the match
        if (startIndex > lastIndex) {
          result.push(text.substring(lastIndex, startIndex));
        }
        // Push the highlighted match
        result.push(
          <span key={startIndex} className={color}>
            {word}
          </span>
        );
        lastIndex = startIndex + word.length;
      }
    });

    // Push remaining text
    if (lastIndex < text.length) {
      result.push(text.substring(lastIndex));
    }

    return result;
  };

  return (
    <div className="text-center">
      <div className={className}>{getHighlightedText(title)}</div>
    </div>
  );
};

export default Heading;