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 (
        <div className="w-full">
            {/* Progress Label */}
            <div className="flex justify-between items-center mb-2">
                <span className="text-sm font-medium text-gray-700">
                    Progress: {Math.round(progressPercentage)}%
                </span>
                <span className="text-sm text-gray-500">
                    {currentChunkIndex + 1} of {totalChunks} sections
                </span>
            </div>
            
            {/* Progress Bar */}
            <div className="w-full bg-gray-200 rounded-lg h-3 overflow-hidden shadow-sm relative">
                {/* Progress fill */}
                <div 
                    className="h-full bg-green-500 transition-all duration-500 ease-out rounded-lg"
                    style={{ width: `${progressPercentage}%` }}
                />
                
                {/* Optional: Clickable segments overlay */}
                {onChunkClick && (
                    <div className="absolute inset-0 flex">
                        {Array.from({ length: totalChunks }, (_, index) => (
                            <button
                                key={index}
                                onClick={() => onChunkClick(index)}
                                className="flex-1 hover:bg-white hover:bg-opacity-20 transition-colors duration-200"
                                title={`Go to chunk ${index + 1}`}
                            />
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
};

export default ProgressBar;