interface WritingFeedbackProps {
  score?: string
  grammar?: string[]
  vocabulary?: string[]
  structure?: string
  summary?: string
  improvedVersion?: string
}

export function WritingFeedback({ score, grammar, vocabulary, structure, summary }: WritingFeedbackProps) {
  if (!score) return null

  return (
    <div className="space-y-4 rounded-lg border p-4">
      <div className="flex items-center gap-2">
        <span className="font-semibold">Band score:</span>
        <span className="text-lg font-bold text-blue-600">{score}</span>
      </div>
      {summary && <p className="text-sm text-gray-700">{summary}</p>}
      {grammar && grammar.length > 0 && (
        <div>
          <p className="font-medium text-sm">Ngữ pháp:</p>
          <ul className="mt-1 space-y-1 text-sm text-gray-600 list-disc list-inside">
            {grammar.map((item, i) => <li key={i}>{item}</li>)}
          </ul>
        </div>
      )}
      {vocabulary && vocabulary.length > 0 && (
        <div>
          <p className="font-medium text-sm">Từ vựng:</p>
          <ul className="mt-1 space-y-1 text-sm text-gray-600 list-disc list-inside">
            {vocabulary.map((item, i) => <li key={i}>{item}</li>)}
          </ul>
        </div>
      )}
      {structure && (
        <div>
          <p className="font-medium text-sm">Bố cục:</p>
          <p className="text-sm text-gray-600">{structure}</p>
        </div>
      )}
    </div>
  )
}
