frontend/src/components/ChunkNavigation.jsx

const ChunkNavigation = ({ 
    currentChunkIndex, 
    documentData, 
    chunkStates, 
    goToPrevChunk, 
    goToNextChunk 
}) => {
    return (
        <div className="flex items-center justify-center gap-4 mb-4 px-4">
            <button
                onClick={goToPrevChunk}
                disabled={currentChunkIndex === 0}
                className="p-3 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed rounded-lg shadow-sm transition-all"
            >
                <svg className="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={3}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
                </svg>
            </button>
            
            <div className="flex space-x-2">
                {documentData?.chunks?.map((_, index) => (
                    <div
                        key={index}
                        className={`w-3 h-3 rounded-full ${
                            index === currentChunkIndex ? (
                                chunkStates[index] === 'understood' ? 'bg-green-700' :
                                chunkStates[index] === 'skipped' ? 'bg-red-700' :
                                chunkStates[index] === 'interactive' ? 'bg-blue-700' :
                                'bg-gray-600'
                            ) : (
                                chunkStates[index] === 'understood' ? 'bg-green-500' :
                                chunkStates[index] === 'skipped' ? 'bg-red-500' :
                                chunkStates[index] === 'interactive' ? 'bg-blue-500' :
                                'bg-gray-300'
                            )
                        }`}
                    />
                ))}
            </div>
            
            <button
                onClick={goToNextChunk}
                disabled={!documentData?.chunks || currentChunkIndex === documentData.chunks.length - 1}
                className="p-3 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed rounded-lg shadow-sm transition-all"
            >
                <svg className="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={3}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
                </svg>
            </button>
        </div>
    );
};

export default ChunkNavigation;