'use client'

import { ClickableText } from '@/components/ClickableText'

const mockAnalysis = {
  "brought": {
    word: "brought",
    translation: "帶來、提出",
    definition: "Past tense of bring; to take or carry something to a place",
    partOfSpeech: "verb",
    pronunciation: "/brɔːt/",
    synonyms: ["carried", "took", "delivered"],
    isPhrase: true,
    phraseInfo: {
      phrase: "bring up",
      meaning: "提出（話題）、養育",
      warning: "在這個句子中，\"brought up\" 是一個片語，意思是\"提出話題\"，而不是單純的\"帶來\""
    }
  },
  "this": {
    word: "this",
    translation: "這個",
    definition: "Used to indicate something near or just mentioned",
    partOfSpeech: "pronoun",
    pronunciation: "/ðɪs/",
    synonyms: ["that", "it"],
    isPhrase: false
  },
  "thing": {
    word: "thing",
    translation: "事情、東西",
    definition: "An object, fact, or situation",
    partOfSpeech: "noun",
    pronunciation: "/θɪŋ/",
    synonyms: ["object", "matter", "item"],
    isPhrase: false
  },
  "up": {
    word: "up",
    translation: "向上",
    definition: "Toward a higher place or position",
    partOfSpeech: "adverb",
    pronunciation: "/ʌp/",
    synonyms: ["upward", "above"],
    isPhrase: true,
    phraseInfo: {
      phrase: "bring up",
      meaning: "提出（話題）、養育",
      warning: "\"up\" 在這裡是片語 \"bring up\" 的一部分，不是單獨的\"向上\"的意思"
    }
  }
}

export default function TestPage() {
  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold mb-8">互動式單字查詢測試</h1>

        <div className="bg-white rounded-xl shadow-sm p-6">
          <h2 className="text-lg font-semibold mb-4">點擊查詢單字意思</h2>
          <div className="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-400 mb-4">
            <p className="text-sm text-blue-800">
              💡 <strong>使用說明：</strong>點擊下方句子中的任何單字，可以立即查看詳細意思。
              黃色背景表示該單字屬於片語或俚語，會優先顯示片語意思。
            </p>
          </div>

          <div className="p-6 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
            <ClickableText
              text="He brought this thing up during our meeting."
              analysis={mockAnalysis}
              onWordClick={(word, analysis) => {
                console.log('Clicked word:', word, analysis)
              }}
            />
          </div>
        </div>
      </div>
    </div>
  )
}