import { Paper, Container, Grid, Box, Typography, Skeleton } from '@mui/material';

import { ReactElement } from 'react';

const LoadingSkeleton = (): ReactElement => {
  return (
    <Container
      maxWidth="lg"
      sx={{ py: 4, height: '100vh', display: 'flex', flexDirection: 'column' }}
    >
      <Paper
        elevation={3}
        sx={{ flexGrow: 1, display: 'flex', borderRadius: 3, overflow: 'hidden' }}
      >
        <Grid container sx={{ height: '100%' }}>
          <Grid
            size={{ xs: 12, sm: 6, md: 4 }}
            sx={{
              borderRight: { md: '1px solid', borderColor: 'grey.200' },
              display: 'flex',
              flexDirection: 'column',
            }}
          >
            <Box sx={{ p: 3, borderBottom: '1px solid', borderColor: 'grey.200' }}>
              <Typography variant="h5" component="h2" sx={{ fontWeight: 'bold' }}>
                <Skeleton variant="text" sx={{ fontSize: '1rem' }} />
              </Typography>
            </Box>
          </Grid>
        </Grid>
      </Paper>
    </Container>
  );
};

export default LoadingSkeleton;
