import React from 'react';
import { BarclaysLogo } from './icons/BarclaysLogo';

export const LoadingVisual: React.FC = () => {
    return (
        <div className="flex flex-col items-center justify-center text-center py-20 px-6 min-h-[600px]">
            <div className="relative flex items-center justify-center w-48 h-48">
                {/* Pulsing circles */}
                <div className="absolute w-full h-full rounded-full bg-oliver-azure/20 animate-slow-ping"></div>
                <div className="absolute w-3/4 h-3/4 rounded-full bg-oliver-azure/30 animate-slow-ping [animation-delay:-1s]"></div>
                
                {/* Central Icon */}
                <div className="relative bg-white backdrop-blur-sm rounded-full p-6 border border-gray-200 shadow-lg flex items-center justify-center w-28 h-28">
                    <BarclaysLogo className="h-16 w-16 text-oliver-azure" />
                </div>
            </div>
            <h2 className="text-2xl font-bold text-oliver-black mt-12">
                Finalizing your report...
            </h2>
            <p className="text-gray-500 mt-2 max-w-md">
                Our AI agents are completing their analysis. Your detailed feedback summary will appear here shortly.
            </p>
        </div>
    );
};