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

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 minHeight="100vh" bg="rgba(10,10,10,1)" color="white">
      {header && (
        <Box borderBottom borderColor="rgba(255,255,255,0.1)" py={4} bg="rgba(20,22,25,1)">
          <Container size="md">
            {header}
          </Container>
        </Box>
      )}
      
      <Box flexGrow={1} py={12}>
        <Container size="md">
          <Stack direction="row" gap={12}>
            <Box flexGrow={1}>
              <Stack gap={8}>
                {children}
              </Stack>
            </Box>
            
            {sidebar && (
              <Box w="80" display={{ base: 'none', lg: 'block' }}>
                {sidebar}
              </Box>
            )}
          </Stack>
        </Container>
      </Box>

      {footer && (
        <Box borderTop borderColor="rgba(255,255,255,0.1)" py={6} bg="rgba(20,22,25,1)">
          <Container size="md">
            {footer}
          </Container>
        </Box>
      )}
    </Box>
  );
}