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 (
    <Stack minHeight="screen" bg="bg-near-black" color="text-white">
      {header && (
        <Stack borderBottom borderColor="border-charcoal-outline" py={4} bg="bg-deep-charcoal">
          <Container size="md">
            {header}
          </Container>
        </Stack>
      )}
      
      <Stack flex={1} py={12}>
        <Container size="md">
          <Stack direction="row" gap={12}>
            <Stack flex={1}>
              <Stack gap={8}>
                {children}
              </Stack>
            </Stack>
            
            {sidebar && (
              <Stack w="80" display={{ base: 'none', lg: 'block' }}>
                {sidebar}
              </Stack>
            )}
          </Stack>
        </Container>
      </Stack>

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