'use client';

import React from 'react';
import { Box } from '@/ui/Box';

interface AuthShellProps {
  children: React.ReactNode;
}

/**
 * AuthShell
 * 
 * The outermost container for all authentication pages.
 * Provides the "calm intensity" background and centered layout.
 */
export function AuthShell({ children }: AuthShellProps) {
  return (
    <Box as="main" minHeight="100vh" display="flex" alignItems="center" justifyContent="center" p={4} bg="base-black" position="relative" overflow="hidden">
      {/* Subtle background glow - top right */}
      <Box 
        position="absolute" 
        top="-10%" 
        right="-10%" 
        w="40%" 
        h="40%" 
        rounded="full" 
        bg="rgba(25, 140, 255, 0.05)" 
        blur="xl" 
        pointerEvents="none"
        aria-hidden="true"
      />
      {/* Subtle background glow - bottom left */}
      <Box 
        position="absolute" 
        bottom="-10%" 
        left="-10%" 
        w="40%" 
        h="40%" 
        rounded="full" 
        bg="rgba(78, 212, 224, 0.05)" 
        blur="xl" 
        pointerEvents="none"
        aria-hidden="true"
      />
      
      <Box w="full" maxWidth="400px" position="relative" zIndex={10} animate="fade-in">
        {children}
      </Box>
    </Box>
  );
}