import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Stack } from '@/ui/Stack';

interface OnboardingShellProps {
  children: React.ReactNode;
  header?: React.ReactNode;
  footer?: React.ReactNode;
  sidebar?: React.ReactNode;
}

/**
 * OnboardingShell
 * 
 * Semantic layout wrapper for the onboarding flow.
 * Follows "Precision Racing Minimal" theme with dark surfaces and clean structure.
 */
export function OnboardingShell({ children, header, footer, sidebar }: OnboardingShellProps) {
  return (
    <Box minH="screen" bg="bg-near-black" color="text-white" display="flex" flexDirection="column">
      {header && (
        <Box borderB borderColor="border-charcoal-outline" py={4} bg="bg-deep-charcoal">
          <Container size="md">
            {header}
          </Container>
        </Box>
      )}
      
      <Box flex={1} display="flex" py={12}>
        <Container size="md">
          <Box display="flex" gap={12}>
            <Box flex={1}>
              <Stack gap={8}>
                {children}
              </Stack>
            </Box>
            
            {sidebar && (
              <Box w="80" display={{ base: 'none', lg: 'block' }}>
                {sidebar}
              </Box>
            )}
          </Box>
        </Container>
      </Box>

      {footer && (
        <Box borderT borderColor="border-charcoal-outline" py={6} bg="bg-deep-charcoal">
          <Container size="md">
            {footer}
          </Container>
        </Box>
      )}
    </Box>
  );
}
