const LoadingAnimation = ({ uploadProgress }) => (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50">
        <div className="text-center max-w-md">
            <div className="mb-8">
                <div className="w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
                <h2 className="text-2xl font-bold text-gray-900 mb-2">Processing Your Document</h2>
                <p className="text-gray-600">Uploading your PDF...</p>
            </div>

            {/* Upload Progress */}
            <div className="mb-6">
                <div className="flex justify-between text-sm text-gray-600 mb-1">
                    <span>Uploading PDF</span>
                    <span>{uploadProgress}%</span>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-2">
                    <div 
                        className="bg-blue-500 h-2 rounded-full transition-all duration-300"
                        style={{ width: `${uploadProgress}%` }}
                    ></div>
                </div>
            </div>

            <p className="text-sm text-gray-500">
                Preparing your document for viewing...
            </p>
        </div>
    </div>
);

export default LoadingAnimation;