'use client';

interface ProgressBarProps {
  current: number;
  total: number;
  correctCount: number;
}

export default function ProgressBar({ current, total, correctCount }: ProgressBarProps) {
  const percentage = total > 0 ? Math.round((correctCount / total) * 100) : 0;

  return (
    <div className="w-full">
      <div className="flex justify-between items-center mb-2">
        <span className="text-sm text-gray-600">
          سوال {current} از {total}
        </span>
        <span className="text-sm font-medium text-gray-700">
          {correctCount} پاسخ صحیح
        </span>
      </div>
      <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
        <div
          className="bg-gradient-to-l from-green-400 to-green-600 h-3 rounded-full transition-all duration-500 ease-out"
          style={{ width: `${percentage}%` }}
        />
      </div>
      <div className="mt-2 text-sm text-gray-500">
        {percentage}% تکمیل شده
      </div>
    </div>
  );
}