import { useState } from 'react'
import { WordHighlighter } from '../components/learning/WordHighlighter'

export function TestWordHighlighter() {
  const [selectedWord, setSelectedWord] = useState<string>('')

  const text = `
    O pequeno João gosta muito de brincar.
    Sua bola colorida é sua companheira favorita.
    Todos os dias ele corre pelo jardim.
    Às vezes, encontra seus amigos no parque.
  `

  const highlightedWords = ['João', 'bola', 'colorida', 'amigos']
  const difficultWords = ['companheira', 'favorita']

  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-6">Teste do WordHighlighter</h1>
      
      <div className="mb-4 bg-white p-6 rounded-lg shadow">
        <WordHighlighter
          text={text}
          highlightedWords={highlightedWords}
          difficultWords={difficultWords}
          onWordClick={setSelectedWord}
        />
      </div>

      {selectedWord && (
        <div className="mt-4 p-4 bg-gray-100 rounded-lg">
          <p>Palavra selecionada: <strong>{selectedWord}</strong></p>
        </div>
      )}

      <div className="mt-8">
        <h2 className="font-bold mb-2">Legenda:</h2>
        <ul className="space-y-2">
          <li>
            <span className="inline-block bg-yellow-200 px-2 py-1 rounded">
              Palavras destacadas
            </span>
            {' '}- Palavras importantes para aprendizado
          </li>
          <li>
            <span className="inline-block bg-red-100 px-2 py-1 rounded">
              Palavras difíceis
            </span>
            {' '}- Palavras que precisam de mais atenção
          </li>
        </ul>
      </div>
    </div>
  )
}