import { Progress } from 'antd';

interface QuizProgressProps {
  current: number;
  total: number;
}

export const QuizProgress = ({ current, total }: QuizProgressProps) => {
  const percent = Math.round((current / total) * 100);
  
  return (
    <div className="bg-white px-4 py-3 border-b border-gray-100">
      <div className="flex items-center gap-3">
        <div className="text-xs text-gray-500 font-medium whitespace-nowrap min-w-[3rem]">
          <span className="text-[#008C8C] text-sm font-bold">{current}</span> 
          <span className="mx-0.5 text-gray-300">/</span> 
          {total}
        </div>
        <Progress 
          percent={percent} 
          showInfo={false} 
          strokeColor="#008C8C" 
          trailColor="#E0F7FA"
          size={["100%", 6]}
          className="m-0 flex-1"
        />
      </div>
    </div>
  );
};
