import React from 'react';
import { Box, Container } from '@mui/material';
import { Navigation } from './Navigation';
import { useAuth } from '../../context/AuthContext';

interface LayoutProps {
  children: React.ReactNode;
}

export const Layout: React.FC<LayoutProps> = ({ children }) => {
  const { isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    return (
      <Box
        sx={{
          minHeight: '100vh',
          backgroundColor: '#0F0F0F',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {children}
      </Box>
    );
  }

  return (
    <Box
      sx={{
        minHeight: '100vh',
        backgroundColor: '#0F0F0F',
        paddingBottom: '56px', // Height of bottom navigation
      }}
    >
      <Container
        maxWidth="md"
        sx={{
          paddingTop: 2,
          paddingBottom: 2,
        }}
      >
        {children}
      </Container>
      <Navigation />
    </Box>
  );
};