import { Box, Button, CssBaseline, Grid, Typography } from "@mui/material"
import { ThemeProvider } from "@mui/material/styles"
import { theme } from ".."
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
import { useNavigate } from "react-router-dom"

export const PageNotFound = () => {
    const navigate = useNavigate()

    return <ThemeProvider theme={theme}>
        <CssBaseline />
        <Box style={{ 'minWidth': '100%', 'minHeight': '100%', 'display': 'flex' }}>
            <Grid container direction="row" justifyContent="center" alignItems="center" spacing={3}>
                <Grid item> 
                    <ErrorOutlineIcon style={{width: '11rem', height: '11rem'}}/>
                </Grid>

                <Grid item style={{ 'maxWidth': '50%', 'maxHeight': '80%'}}> 
                    <Grid container direction="column" justifyContent="center" alignItems="flex-start" spacing={1}>
                        <Grid item>
                            <Typography variant="h3">
                                Oops! Page not found!
                            </Typography>
                        </Grid>

                        <Grid item  style={{ 'maxWidth': '85%', 'maxHeight': '60%'}}>
                            <Typography variant="body1" display="block" gutterBottom>
                                您要访问的页面不存在！请确认您是不是瞎几把输入了个URL然后就访问。如果不是那就是出bug了，带上你访问的URL截图发给<strong> Lama </strong><div style={{'color': 'rgba(0,0,0,0)'}}>也解决不了</div>
                            </Typography>
                        </Grid>

                        <Grid item>
                            <Button variant="contained" color="primary" onClick={() => { navigate('/') }}>
                                返回主页
                            </Button>
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
        </Box>
    </ThemeProvider>
}