interface Props {
  current: number
  max: number
}

export default function ProgressBar({ current, max }: Props) {
  const pct = Math.min((current / max) * 100, 100)

  return (
    <div className="px-4 py-2 border-b border-gray-800">
      <div className="flex items-center justify-between text-xs text-gray-400 mb-1">
        <span>Progress</span>
        <span>Question {current} of {max}</span>
      </div>
      <div className="h-1.5 bg-gray-800 rounded-full overflow-hidden">
        <div
          className="h-full bg-indigo-500 rounded-full transition-all duration-500"
          style={{ width: `${pct}%` }}
        />
      </div>
    </div>
  )
}