dramaling-vocab-learning/frontend/components/generate/GrammarCorrectionPanel.tsx

import React from 'react'

interface GrammarCorrection {
  hasErrors: boolean
  originalText: string
  correctedText: string | null
  corrections: Array<{
    position: { start: number; end: number }
    error: string
    correction: string
    type: string
    explanation: string
    severity: 'high' | 'medium' | 'low'
  }>
  confidenceScore: number
}

interface GrammarCorrectionPanelProps {
  correction: GrammarCorrection
  originalText: string
  onAccept: () => void
  onReject: () => void
  className?: string
}

export const GrammarCorrectionPanel: React.FC<GrammarCorrectionPanelProps> = ({
  correction,
  originalText,
  onAccept,
  onReject,
  className = ''
}) => {
  if (!correction.hasErrors) {
    return null
  }

  return (
    <div className={`bg-yellow-50 border border-yellow-200 rounded-xl p-6 mb-6 ${className}`}>
      <div className="flex items-start gap-3">
        <div className="text-yellow-600 text-2xl">⚠️</div>
        <div className="flex-1">
          <h3 className="text-lg font-semibold text-yellow-800 mb-2">發現語法問題</h3>
          <p className="text-yellow-700 mb-4">AI建議修正以下內容，這將提高學習效果：</p>

          <div className="space-y-3 mb-4">
            <div>
              <span className="text-sm font-medium text-yellow-700">原始輸入：</span>
              <div className="bg-white p-3 rounded border border-yellow-300 mt-1">
                {originalText}
              </div>
            </div>
            <div>
              <span className="text-sm font-medium text-yellow-700">建議修正：</span>
              <div className="bg-yellow-100 p-3 rounded border border-yellow-300 mt-1 font-medium">
                {correction.correctedText || originalText}
              </div>
            </div>
          </div>

          <div className="flex gap-3">
            <button
              onClick={onAccept}
              className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center gap-2"
            >
              <span>✅</span>
              採用修正
            </button>
            <button
              onClick={onReject}
              className="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors flex items-center gap-2"
            >
              <span>📝</span>
              保持原樣
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}