import { useTheme } from '../lib/theme-context';

export default function AuthLayout({ children }) {
  const { theme } = useTheme();

  return (
    <div className="min-h-screen relative overflow-hidden">
      {/* Animated Fire Glow Background */}
      <div 
        className="absolute inset-0 fire-glow-bg"
        style={{
          background: theme === 'dark' 
            ? `
              radial-gradient(circle at 20% 80%, rgba(255, 107, 0, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(255, 69, 0, 0.12) 0%, transparent 50%),
              radial-gradient(circle at 40% 40%, rgba(220, 38, 127, 0.08) 0%, transparent 50%),
              linear-gradient(135deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.98) 100%)
            `
            : `
              radial-gradient(circle at 20% 80%, rgba(255, 171, 64, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(251, 146, 60, 0.06) 0%, transparent 50%),
              radial-gradient(circle at 40% 40%, rgba(249, 115, 22, 0.04) 0%, transparent 50%),
              linear-gradient(135deg, rgba(255, 251, 235, 0.9) 0%, rgba(254, 243, 199, 0.95) 100%)
            `
        }}
      />
      
      {/* Floating Embers */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        {Array.from({ length: 12 }).map((_, i) => (
          <div
            key={i}
            className="absolute animate-ember-float opacity-30"
            style={{
              left: `${Math.random() * 100}%`,
              top: `${Math.random() * 100}%`,
              animationDelay: `${Math.random() * 8}s`,
              animationDuration: `${8 + Math.random() * 4}s`
            }}
          >
            <div
              className="w-1 h-1 rounded-full"
              style={{
                backgroundColor: theme === 'dark' 
                  ? `rgba(255, ${100 + Math.random() * 100}, 0, 0.6)`
                  : `rgba(251, ${100 + Math.random() * 46}, 60, 0.4)`,
                boxShadow: theme === 'dark'
                  ? `0 0 8px rgba(255, ${100 + Math.random() * 100}, 0, 0.4)`
                  : `0 0 6px rgba(251, ${100 + Math.random() * 46}, 60, 0.3)`
              }}
            />
          </div>
        ))}
      </div>

      {/* Content */}
      <div className="relative z-10">
        {children}
      </div>
    </div>
  );
}