'use client';

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

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 (
    <Stack as="main" minHeight="screen" align="center" justify="center" p={4} bg="base-black" position="relative" overflow="hidden">
      {/* Subtle background glow - top right */}
      <Stack 
        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"
      >{null}</Stack>
      {/* Subtle background glow - bottom left */}
      <Stack 
        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"
      >{null}</Stack>
      
      <Stack w="full" maxWidth="400px" position="relative" zIndex={10} {...({ animate: "fade-in" } as any)}>
        {children}
      </Stack>
    </Stack>
  );
}