converta isso para html:

```
import React, { useState, useEffect } from 'react';

// Helper function to generate a unique 5-character ID
const generateUniqueId = (): string => {
  return Math.random().toString(36).substring(2, 7);
};

// Helper function to shuffle an array (Fisher-Yates algorithm)
const shuffleArray = <T,>(array: T[]): T[] => {
  const shuffledArray = [...array];
  for (let i = shuffledArray.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
  }
  return shuffledArray;
};

interface WordItem {
  id: string;
  text: string;
  index: number;
}

const WordProcessor: React.FC = () => {
  // Simulate the initial text content from the divs
  // In a real scenario, this might come from props, context, or an API call
  const initialForeignWordsText = `Olá<br>Mundo<br><br>Teste<br>Palavra`;
  const initialWordContainerText = `Apple<br>Banana<br>Cherry<br>Date<br>Fig<br>Grape<br><br>`;

  const [processedWords, setProcessedWords] = useState<WordItem[]>([]);

  useEffect(() => {
    // 1. Get elements and separate by <br>
    const cleanSplit = (text: string): string[] => {
      return text
        .split(/<br\s*\/?>/i) // Split by <br> tag (case-insensitive, handles variations)
        .map(item => item.trim()) // Trim whitespace
        .filter(item => item !== ''); // Remove empty strings
    };

    const foreignListRaw = cleanSplit(initialForeignWordsText);
    const wordContainerListRaw = cleanSplit(initialWordContainerText);

    // 2. Transform items into structured objects with IDs and indexes
    let currentIndex = 0;
    const foreignWordItems: WordItem[] = foreignListRaw.map((text) => {
      const item = {
        id: generateUniqueId(),
        text: text,
        index: currentIndex++,
      };
      return item;
    });

    const lastForeignIndex = foreignWordItems.length > 0 ? foreignWordItems[foreignWordItems.length - 1].index : -1;
    currentIndex = lastForeignIndex + 1; // Start indexing for the next list

    const wordContainerItems: WordItem[] = wordContainerListRaw.map((text) => {
       const item = {
        id: generateUniqueId(),
        text: text,
        index: currentIndex++,
      };
       return item;
    });

    // 3. Select random items from word-container list
    const shuffledWordContainer = shuffleArray(wordContainerItems);
    const numItemsToSelect = Math.floor(Math.random() * 5); // 0 to 4 items
    const selectedItems = shuffledWordContainer.slice(0, numItemsToSelect);

    // 4. Combine lists and shuffle
    const combinedList = [...foreignWordItems, ...selectedItems];
    const finalShuffledList = shuffleArray(combinedList);

    setProcessedWords(finalShuffledList);

  }, [initialForeignWordsText, initialWordContainerText]); // Rerun effect if initial text changes

  return (
    <div className="p-6 bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
      <h1 className="text-3xl font-bold text-indigo-800 mb-6">Word Processor</h1>

      {/* Display Simulated Input for Clarity */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
        <div className="bg-white p-4 rounded-lg shadow">
          <h2 className="text-lg font-semibold text-gray-700 mb-2">Simulated `foreign-wordstextgetter` Input:</h2>
          <div className="text-sm text-gray-600" dangerouslySetInnerHTML={{ __html: initialForeignWordsText || '<i>Empty</i>' }} />
        </div>
        <div className="bg-white p-4 rounded-lg shadow">
          <h2 className="text-lg font-semibold text-gray-700 mb-2">Simulated `word-container` Input:</h2>
           <div className="text-sm text-gray-600" dangerouslySetInnerHTML={{ __html: initialWordContainerText || '<i>Empty</i>' }} />
        </div>
      </div>

      <h2 className="text-2xl font-semibold text-indigo-700 mb-4">Processed & Shuffled Words</h2>
      <div className="foreign-words bg-white p-4 rounded-lg shadow-md border border-indigo-200 flex flex-wrap gap-3">
        {processedWords.length > 0 ? (
          processedWords.map((item) => (
            <div
              key={item.id} // Use unique id for React key
              className="word bg-indigo-100 text-indigo-800 border border-indigo-300 rounded-md px-3 py-1 text-center shadow-sm hover:bg-indigo-200 transition-colors duration-150"
              data-word={item.id}
              data-word-index={item.index}
            >
              {item.text}
            </div>
          ))
        ) : (
          <p className="text-gray-500 italic">No words to display.</p>
        )}
      </div>
    </div>
  );
};

export default WordProcessor;
```