'use client'

interface ProgressBarProps {
  answered: number
  total: number
}

export function ProgressBar({ answered, total }: ProgressBarProps) {
  const pct = total === 0 ? 0 : Math.round((answered / total) * 100)
  return (
    <div className="progress-bar-container">
      <div
        className="progress-bar-fill"
        role="progressbar"
        aria-label={`Progreso de la encuesta: ${pct}%`}
        aria-valuenow={pct}
        aria-valuemin={0}
        aria-valuemax={100}
        style={{ width: `${pct}%` }}
      />
      <span className="progress-bar-label" aria-hidden="true">
        {answered}/{total} respondidas
      </span>
    </div>
  )
}