import { useNavigate } from 'react-router-dom';
import { Box, Stack, Typography, Button } from '@mui/material';
import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';

export default function Error500() {
  const navigate = useNavigate();

  return (
    <Box
      sx={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        p: 3,
        textAlign: 'center'
      }}
    >
      <Stack spacing={2} alignItems="center">
        <Typography sx={{ fontWeight: 900, fontSize: { xs: '6rem', md: '9rem' }, lineHeight: 1, color: 'primary.main' }}>
          500
        </Typography>
        <Box sx={{ width: 64, height: 4, borderRadius: 2, bgcolor: 'primary.main' }} />
        <Typography variant="h3" sx={{ fontWeight: 700, color: 'grey.800' }}>Internal Server Error</Typography>
        <Typography variant="body1" color="text.secondary" sx={{ maxWidth: 460 }}>
          Server error 500. We are fixing the problem. Please try again at a later stage.
        </Typography>
        <Button variant="contained" size="large" startIcon={<HomeOutlinedIcon />} onClick={() => navigate('/dashboard')} sx={{ mt: 1 }}>
          Back To Home
        </Button>
      </Stack>
    </Box>
  );
}
