story-generator/src/components/learning/WordHighlighter.tsx

interface WordHighlighterProps {
  text: string;                    // Texto completo
  highlightedWords: string[];      // Palavras para destacar (ex: palavras difíceis)
  difficultWords: string[];        // Palavras que o aluno teve dificuldade
  onWordClick: (word: string) => void;  // Função para quando clicar na palavra
}

export function WordHighlighter({
  text,
  highlightedWords,
  difficultWords,
  onWordClick
}: WordHighlighterProps) {
  // Divide o texto em palavras mantendo a pontuação
  const words = text.split(/(\s+)/).filter(word => word.trim().length > 0);
  
  return (
    <div className="leading-relaxed text-lg space-y-4">
      {words.map((word, i) => {
        // Remove pontuação para comparação
        const cleanWord = word.toLowerCase().replace(/[.,!?;:]/, '');
        
        // Determina o estilo baseado no tipo da palavra
        const isHighlighted = highlightedWords.includes(cleanWord);
        const isDifficult = difficultWords.includes(cleanWord);
        
        return (
          <span
            key={i}
            onClick={() => onWordClick(word)}
            className={`
              inline-block mx-1 px-1 rounded cursor-pointer transition-all
              hover:scale-110
              ${isHighlighted ? 'bg-yellow-200 hover:bg-yellow-300' : ''}
              ${isDifficult ? 'bg-red-100 hover:bg-red-200' : ''}
              hover:bg-gray-100
            `}
            title="Clique para ver mais informações"
          >
            {word}
          </span>
        );
      })}
    </div>
  );
}