import { Box, Fade, Skeleton, Stack, Typography } from '@mui/material';

export default function PaymentSkeleton() {
  return (
    <Fade in>
      <Stack direction="column">
        <Skeleton variant="text" sx={{ fontSize: '1.75rem', width: '40%' }} />
        <Skeleton sx={{ mt: 2 }} variant="rounded" height={68} />
        <Box
          sx={{
            mt: 1,
          }}>
          <Typography
            component="div"
            variant="h4"
            sx={{
              mb: -1,
            }}>
            <Skeleton />
          </Typography>
          <Typography component="div">
            <Skeleton height={60} />
          </Typography>
        </Box>
        <Box>
          <Typography
            component="div"
            variant="h4"
            sx={{
              mb: -1,
            }}>
            <Skeleton />
          </Typography>
          <Typography component="div">
            <Skeleton height={60} />
          </Typography>
        </Box>
        <Box>
          <Skeleton height={60} />
        </Box>
      </Stack>
    </Fade>
  );
}