import { ReactNode } from 'react';
import { Box } from './Box';
import { Glow } from './Glow';

export interface AuthLayoutProps {
  children: ReactNode;
}

export const AuthLayout = ({ children }: AuthLayoutProps) => {
  return (
    <Box 
      as="main" 
      minHeight="100vh" 
      display="flex" 
      alignItems="center" 
      justifyContent="center" 
      padding={4} 
      bg="var(--ui-color-bg-base)" 
      position="relative" 
      style={{ overflow: 'hidden' }}
    >
      <Glow color="primary" size="xl" opacity={0.05} position="top-right" />
      <Glow color="aqua" size="xl" opacity={0.05} position="bottom-left" />
      
      <Box width="100%" maxWidth="25rem" position="relative" zIndex={10}>
        {children}
      </Box>
    </Box>
  );
};