import React from 'react';
import '../styles/ProcessingAnimation.css';

export const ProcessingAnimation: React.FC = () => {
  return (
    <div className="flex flex-col items-center justify-center py-8 space-y-4">
      {/* Brain container with pulse and glow animation */}
      <div className="relative">
        {/* Brain icon with pulse animation */}
        <div className="w-16 h-16 animate-pulse-gentle text-gray-600">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.5"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="animate-spin-slow"
          >
            <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z" />
            <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z" />
          </svg>
        </div>

        {/* Glowing effect */}
        <div className="absolute inset-0 animate-glow bg-blue-400 rounded-full opacity-20" />
      </div>

      {/* Thought bubbles */}
      <div className="relative h-16 w-16">
        {/* Multiple bubbles with different animations */}
        {[...Array(3)].map((_, i) => (
          <div
            key={i}
            className="absolute left-1/2 bottom-0 w-3 h-3 rounded-full bg-white border-2 border-blue-400 thought-bubble opacity-0"
            style={{
              transform: 'translateX(-50%)',
            }}
          />
        ))}
      </div>

      {/* Processing text */}
      <p className="text-gray-600 font-medium animate-pulse">
        Processing with AI...
      </p>

    </div>
  );
};
