import React from 'react'

interface ProgressBarProps {
  current: number
  total: number
  correct: number
  incorrect: number
  skipped: number
  className?: string
}

export const ProgressBar: React.FC<ProgressBarProps> = ({
  current,
  total,
  correct,
  incorrect,
  skipped,
  className = ''
}) => {
  const percentage = total > 0 ? Math.round((current / total) * 100) : 0
  const completed = correct + incorrect + skipped

  return (
    <div className={`bg-white rounded-lg shadow p-4 ${className}`}>
      <div className="flex justify-between items-center mb-2">
        <h3 className="font-medium text-gray-900">複習進度</h3>
        <span className="text-sm text-gray-600">
          {current + 1} / {total}
        </span>
      </div>

      {/* 進度條 */}
      <div className="w-full bg-gray-200 rounded-full h-2 mb-3">
        <div
          className="bg-blue-600 h-2 rounded-full transition-all duration-300"
          style={{ width: `${percentage}%` }}
        />
      </div>

      {/* 統計信息 */}
      <div className="grid grid-cols-4 gap-2 text-xs">
        <div className="text-center">
          <div className="font-semibold text-green-600">{correct}</div>
          <div className="text-gray-500">正確</div>
        </div>
        <div className="text-center">
          <div className="font-semibold text-red-600">{incorrect}</div>
          <div className="text-gray-500">錯誤</div>
        </div>
        <div className="text-center">
          <div className="font-semibold text-yellow-600">{skipped}</div>
          <div className="text-gray-500">跳過</div>
        </div>
        <div className="text-center">
          <div className="font-semibold text-gray-600">{total - completed}</div>
          <div className="text-gray-500">待完成</div>
        </div>
      </div>

      {/* 百分比顯示 */}
      <div className="mt-3 text-center">
        <span className="text-lg font-semibold text-blue-600">{percentage}%</span>
        <span className="text-sm text-gray-500 ml-1">已完成</span>
      </div>
    </div>
  )
}