import React from 'react';

export const LoadingScreen: React.FC = () => {
  return (
    <div className="fixed inset-0 bg-white z-50 flex flex-col items-center justify-center">
      <div className="relative w-20 h-20">
        {/* Animated Rings */}
        <div className="absolute inset-0 border-4 border-gray-100 rounded-full"></div>
        <div className="absolute inset-0 border-4 border-brand-gold rounded-full border-t-transparent animate-spin"></div>
        
        {/* Logo or Icon in Center */}
        <div className="absolute inset-0 flex items-center justify-center">
            <div className="w-8 h-8 bg-brand-black rounded-sm transform rotate-45 flex items-center justify-center">
                <div className="w-3 h-3 bg-white rounded-full"></div>
            </div>
        </div>
      </div>
      <p className="mt-4 text-gray-500 text-sm font-medium animate-pulse">Carregando...</p>
    </div>
  );
};