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

export default function DonationSkeleton() {
  return (
    <Fade in>
      <Stack direction="column">
        <Skeleton variant="text" sx={{ fontSize: '1.75rem', width: '40%' }} />
        <Skeleton sx={{ mt: 2 }} variant="rounded" height={40} />
        <Divider
          sx={{
            mt: {
              xs: '16px',
              md: '16px',
            },
            mb: {
              xs: '16px',
              md: '16px',
            },
          }}
        />
        <Stack
          direction="row"
          spacing={2}
          sx={{
            justifyContent: 'space-between',
          }}>
          <Skeleton variant="text" sx={{ fontSize: '1.5rem', width: '40%' }} />
          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
              gap: 2,
            }}>
            <Box>
              <Skeleton height={60} width={80} />
            </Box>
            <Box>
              <Skeleton height={60} width={120} />
            </Box>
          </Box>
        </Stack>
      </Stack>
    </Fade>
  );
}