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

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

  return (
    <Box
      sx={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        p: 3,
        textAlign: 'center'
      }}
    >
      <Stack spacing={2.5} alignItems="center">
        <Box
          sx={{
            width: 110,
            height: 110,
            borderRadius: '50%',
            bgcolor: 'primary.lighter',
            color: 'primary.main',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
        >
          <ConstructionOutlinedIcon sx={{ fontSize: 56 }} />
        </Box>
        <Typography variant="h3" sx={{ fontWeight: 700, color: 'grey.800' }}>Under Construction</Typography>
        <Typography variant="body1" color="text.secondary" sx={{ maxWidth: 460 }}>
          Hey! Please check out this site later. We are doing some maintenance on it right now.
        </Typography>
        <Button variant="contained" size="large" startIcon={<HomeOutlinedIcon />} onClick={() => navigate('/dashboard')} sx={{ mt: 1 }}>
          Back To Home
        </Button>
      </Stack>
    </Box>
  );
}
