/** Fortschrittsbalken fuer Roadmaps: Prozent + "x von y Knoten fertig". */
export default function RoadmapProgressBar({ progress, compact = false }) {
  const { percent, done, total } = progress || { percent: 0, done: 0, total: 0 }
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: compact ? 120 : 180 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
        <span className="muted">{percent}%</span>
        {!compact && <span className="faint">{done} von {total} fertig</span>}
      </div>
      <div style={{ height: 6, borderRadius: 3, background: 'var(--border)', overflow: 'hidden' }}>
        <div
          style={{
            width: `${percent}%`,
            height: '100%',
            borderRadius: 3,
            background: percent >= 100 ? 'var(--ok, #22c55e)' : 'var(--accent, #3b82f6)',
            transition: 'width 0.3s ease',
          }}
        />
      </div>
    </div>
  )
}