import React from 'react'; const ProgressBar = ({ currentChunkIndex, totalChunks, onChunkClick = null // Optional: allow clicking on progress bar segments }) => { const progressPercentage = totalChunks > 0 ? ((currentChunkIndex +1) / totalChunks) * 100 : 0; return (
{/* Progress Label */}
Progress: {Math.round(progressPercentage)}% {currentChunkIndex + 1} of {totalChunks} sections
{/* Progress Bar */}
{/* Progress fill */}
{/* Optional: Clickable segments overlay */} {onChunkClick && (
{Array.from({ length: totalChunks }, (_, index) => (
)}
); }; export default ProgressBar;