import React from 'react';
import { Outlet } from 'react-router-dom';
import { Box, Container, Paper, Typography, Button } from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';

const AuthLayout = () => {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        minHeight: '100vh',
        bgcolor: (theme) => theme.palette.mode === 'dark' ? 'background.default' : 'grey.100',
      }}
    >
      <Container maxWidth="sm" sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1, py: 4 }}>
        <Button 
          component={RouterLink} 
          to="/" 
          startIcon={<ArrowBackIcon />}
          sx={{ alignSelf: 'flex-start', mb: 2 }}
        >
          Back to Home
        </Button>
        
        <Paper
          elevation={3}
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            p: 4,
            mb: 4,
          }}
        >
          <Typography component="h1" variant="h4" gutterBottom>
            Rocks, Bones & Sticks
          </Typography>
          
          <Box sx={{ width: '100%', mt: 2 }}>
            <Outlet />
          </Box>
        </Paper>
      </Container>
      
      <Box
        component="footer"
        sx={{
          py: 2,
          px: 2,
          mt: 'auto',
          backgroundColor: (theme) =>
            theme.palette.mode === 'light'
              ? theme.palette.grey[200]
              : theme.palette.grey[800],
        }}
      >
        <Container maxWidth="sm" sx={{ textAlign: 'center' }}>
          <Typography variant="body2" color="text.secondary">
            &copy; {new Date().getFullYear()} Rocks, Bones & Sticks. All rights reserved.
          </Typography>
        </Container>
      </Box>
    </Box>
  );
};

export default AuthLayout;