import { Box, Typography, Button, Stack, Paper } from '@mui/material'
import { Link as RouterLink } from 'react-router-dom'

export function NotFoundPage() {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        minHeight: '100vh',
        bgcolor: 'background.default',
        alignItems: 'center',
        justifyContent: 'center',
        py: 4,
        px: 2,
      }}
    >
      <Paper sx={{ p: 4, borderRadius: 3, bgcolor: 'background.paper' }}>
        <Stack spacing={3} sx={{ alignItems: 'center', textAlign: 'center' }}>
          <Box sx={{ fontSize: 96, lineHeight: 1 }}>404</Box>
          <Typography variant="h4" component="h1" gutterBottom>
            Страница не найдена
          </Typography>
          <Typography variant="body2" color="text.secondary" sx={{ maxWidth: 400 }}>
            Извините, но запрашиваемая страница не существует или была удалена.
          </Typography>
          <Stack direction="row" spacing={2} sx={{ mt: 2 }}>
            <Button
              variant="contained"
              size="large"
              onClick={() => {
                window.location.href = '/'
              }}
              sx={{ px: 4 }}
            >
              Вернуться на главную
            </Button>
            <Button variant="outlined" size="large" component={RouterLink} to="/" sx={{ px: 4 }}>
              Посмотреть каталог
            </Button>
          </Stack>
        </Stack>
      </Paper>
    </Box>
  )
}