import { cn } from '@/lib/utils'

/**
 * Fortschritt als Balken. Der Wert steht zusätzlich als Text daneben — ein
 * Balken allein ist für Menschen mit Sehschwäche und für Vorleseprogramme
 * wertlos.
 */
export function Fortschrittsbalken({
  prozent,
  className,
  beschriftung,
}: {
  prozent: number
  className?: string
  beschriftung?: string
}) {
  const wert = Math.min(100, Math.max(0, Math.round(prozent)))

  return (
    <div
      role="progressbar"
      aria-valuenow={wert}
      aria-valuemin={0}
      aria-valuemax={100}
      {...(beschriftung ? { 'aria-label': beschriftung } : {})}
      className={cn('bg-gedaempft h-2 w-full overflow-hidden rounded-full', className)}
    >
      <div
        className={cn(
          'h-full rounded-full transition-[width]',
          wert === 100 ? 'bg-erfolg' : 'bg-betont',
        )}
        style={{ width: `${wert}%` }}
      />
    </div>
  )
}