interface SentenceReorderTestProps {
  currentCard: any
  shuffledWords: string[]
  arrangedWords: string[]
  reorderResult: boolean | null
  onWordClick: (word: string) => void
  onRemoveFromArranged: (word: string) => void
  onCheckAnswer: () => void
  onReset: () => void
  onReportError: () => void
  onNavigate: (direction: string) => void
  currentCardIndex: number
  totalCards: number
  setModalImage: (image: string | null) => void
}

export const SentenceReorderTest: React.FC<SentenceReorderTestProps> = (props) => {
  return (
    <div className="text-center py-8">
      <p>SentenceReorderTest 測驗組件</p>
      <p>詞卡: {props.currentCard?.word}</p>

      <div className="mb-4">
        <p>可用詞語:</p>
        <div className="flex flex-wrap gap-2 justify-center">
          {props.shuffledWords.map((word, index) => (
            <button
              key={index}
              onClick={() => props.onWordClick(word)}
              className="bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded"
            >
              {word}
            </button>
          ))}
        </div>
      </div>

      <div className="mb-4">
        <p>你的句子:</p>
        <div className="flex flex-wrap gap-2 justify-center">
          {props.arrangedWords.map((word, index) => (
            <button
              key={index}
              onClick={() => props.onRemoveFromArranged(word)}
              className="bg-blue-200 hover:bg-blue-300 px-3 py-1 rounded"
            >
              {word}
            </button>
          ))}
        </div>
      </div>

      <div className="space-x-2">
        <button
          onClick={props.onCheckAnswer}
          className="bg-green-500 text-white px-4 py-2 rounded"
        >
          檢查答案
        </button>
        <button
          onClick={props.onReset}
          className="bg-gray-500 text-white px-4 py-2 rounded"
        >
          重置
        </button>
      </div>
    </div>
  )
}