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

export interface ErrorPageContainerProps {
  children: ReactNode;
}

export const ErrorPageContainer = ({ children }: ErrorPageContainerProps) => {
  return (
    <Box 
      minHeight="100vh" 
      display="flex" 
      alignItems="center" 
      justifyContent="center" 
      padding={4} 
      bg="var(--ui-color-bg-base)"
    >
      <Surface variant="default" rounded="xl" padding={8} style={{ maxWidth: '32rem', width: '100%', border: '1px solid var(--ui-color-border-default)' }}>
        {children}
      </Surface>
    </Box>
  );
};