interface ProgressTrackerProps {
  completedTests: number
  totalTests: number
  onShowTaskList: () => void
}

export const ProgressTracker: React.FC<ProgressTrackerProps> = ({
  completedTests,
  totalTests,
  onShowTaskList
}) => {
  const progressPercentage = totalTests > 0 ? (completedTests / totalTests) * 100 : 0

  return (
    <div className="mb-8">
      <div className="flex justify-between items-center mb-3">
        <span className="text-sm font-medium text-gray-900">學習進度</span>
        <div className="flex items-center gap-6">
          <button
            onClick={onShowTaskList}
            className="text-sm text-gray-600 hover:text-blue-600 transition-colors cursor-pointer flex items-center gap-1"
            title="點擊查看詳細進度"
          >
            測驗: {completedTests}/{totalTests}
            <span className="text-xs ml-1">📋</span>
          </button>
        </div>
      </div>

      <div
        className="w-full bg-gray-200 rounded-full h-3 cursor-pointer hover:bg-gray-300 transition-colors"
        onClick={onShowTaskList}
        title="點擊查看詳細進度"
      >
        <div
          className="bg-blue-500 h-3 rounded-full transition-all hover:bg-blue-600"
          style={{
            width: `${progressPercentage}%`
          }}
        ></div>
      </div>
    </div>
  )
}