import { Paper, 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"
import "./custom.css"

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

    return <ThemeProvider theme={theme}>
        <CssBaseline />
        <div className="rootPanel">

            <Box>
                <Grid container direction="column" justifyContent="center" alignItems="center" spacing={1}>
                    <Paper elevation={3} className="inlineBox">
                        <Grid container direction="column" justifyContent="center" alignItems="center" spacing={3}>
                            <Grid item><Grid container direction="row" alignItems="center">
                                <ErrorOutlineIcon style={{
                                    width: '3rem',
                                    height: '3rem',
                                    marginRight: '0.5rem'
                                }}/>
                                <Typography variant="h5">
                                    Oops! 网页娘迷路了~
                                </Typography>
                            </Grid></Grid>

                            <Grid item style={{
                                color: "pink",
                                lineHeight: "5px"
                            }}>
                                <Typography>
                                    如果你看到这个页面，那大概率是你乱访问了一个不存在的地址。
                                </Typography>
                            </Grid>
                            <Grid item>
                                <Typography>
                                    如果不是这样的，那可能是网页出现了Bug，请截图发送给开发者 Qumolama.d 以寻求帮助。
                                </Typography>
                            </Grid>
                            <Grid item>
                                <Button variant="contained" color="primary" onClick={() => { navigate('/') }}>
                                    返回主页
                                </Button>
                            </Grid>
                            <Grid item>
                                <Button variant="contained" color="primary" href="https://t.me/qumolama" target="_blank">
                                    找开发者击剑
                                </Button>
                            </Grid>
                        </Grid>
                    </Paper>
                </Grid>
            </Box>
        </div>
    </ThemeProvider>
}