import { MessageCircle } from 'lucide-react'

export function LoadingScreen() {
  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: `
        @keyframes dotPulse {
          0%, 100% {
            opacity: 0.3;
            transform: scale(0.8);
          }
          50% {
            opacity: 1;
            transform: scale(1.2);
          }
        }
        .dot-animate {
          animation: dotPulse 1.2s ease-in-out infinite;
        }
      `}} />
      <div className="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900">
        <div className="flex flex-col items-center space-y-4">
          {/* Cercle avec icône messenger */}
          <div className="relative w-16 h-16">
            {/* Cercle discret */}
            <div className="absolute inset-0 rounded-full border-2 border-gray-200 dark:border-gray-700"></div>
            
            {/* Icône messenger au centre */}
            <div className="absolute inset-0 flex items-center justify-center">
              <MessageCircle className="w-6 h-6 text-teal-500" />
            </div>
          </div>
          
          {/* 3 points alignés qui s'allument et s'éteignent en séquence */}
          <div className="flex items-center space-x-2">
            <div 
              className="w-2 h-2 rounded-full bg-teal-500 dot-animate"
              style={{ 
                animationDelay: '0s',
              }}
            ></div>
            <div 
              className="w-2 h-2 rounded-full bg-teal-500 dot-animate"
              style={{ 
                animationDelay: '0.4s',
              }}
            ></div>
            <div 
              className="w-2 h-2 rounded-full bg-teal-500 dot-animate"
              style={{ 
                animationDelay: '0.8s',
              }}
            ></div>
          </div>
        </div>
      </div>
    </>
  )
}