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

export interface ErrorPageContainerProps {
  children: ReactNode;
  size?: 'sm' | 'md' | 'lg';
  variant?: 'default' | 'glass';
}

export const ErrorPageContainer = ({ children, size = 'md', variant = 'default' }: ErrorPageContainerProps) => {
  const sizeMap = {
    sm: '24rem',
    md: '32rem',
    lg: '42rem',
  };

  return (
    <Box 
      minHeight="100vh" 
      display="flex" 
      alignItems="center" 
      justifyContent="center" 
      padding={4} 
      bg="var(--ui-color-bg-base)"
      position="relative"
      overflow="hidden"
    >
      <Surface 
        variant={variant} 
        rounded="xl" 
        padding={8} 
        maxWidth={sizeMap[size]} 
        width="100%" 
        border={true} 
        position="relative" 
        zIndex={10}
      >
        {children}
      </Surface>
    </Box>
  );
};