import Card from '@material-hu/mui/Card';
import Stack from '@material-hu/mui/Stack';

import Skeleton from '@material-hu/components/design-system/Skeleton';

import useHuGoTheme from 'src/hooks/useHuGoTheme';

export const AcknowledgementCardSkeleton = () => {
  const HugoThemeProvider = useHuGoTheme();
  return (
    <HugoThemeProvider>
      <Card sx={{ width: '100%', borderRadius: 2 }}>
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', p: 3 }}>
          <Skeleton
            variant="circular"
            sx={{ width: 40, height: 40, borderRadius: 2 }}
          />
          <Stack sx={{ ml: 1, gap: 1 }}>
            <Skeleton sx={{ width: 154, height: 22 }} />
            <Skeleton sx={{ width: 75, height: 20 }} />
          </Stack>
        </Stack>

        <Stack sx={{ justifyContent: 'center', alignItems: 'center' }}>
          <Skeleton
            variant="rectangular"
            sx={{ width: '100%', height: 200 }}
          />
          <Skeleton
            variant="circular"
            sx={{ width: 64, height: 64, mt: -4 }}
          />
        </Stack>

        <Stack sx={{ gap: 2, mt: 2, width: '100%', alignItems: 'center' }}>
          <Skeleton sx={{ width: 220, height: 25 }} />
          <Skeleton sx={{ width: 154, height: 30, borderRadius: 2 }} />
        </Stack>

        <Stack sx={{ p: 3, width: '100%' }}>
          <Skeleton
            variant="text"
            sx={{ width: '100%' }}
          />
          <Skeleton
            variant="text"
            sx={{ width: '40%' }}
          />
          <Stack sx={{ flexDirection: 'row', pt: 2, gap: 1 }}>
            <Skeleton sx={{ width: 50, height: 30, borderRadius: 2 }} />
            <Skeleton sx={{ width: 50, height: 30, borderRadius: 2 }} />
            <Skeleton sx={{ width: 120, height: 30, borderRadius: 1 }} />
          </Stack>
          <Skeleton sx={{ width: 120, height: 30, mt: 2 }} />
          <Stack
            sx={{
              flexDirection: 'row',
              gap: 2,
              mt: 2,
              alignItems: 'center',
            }}
          >
            <Skeleton
              variant="circular"
              sx={{ width: 35, height: 35 }}
            />
            <Skeleton sx={{ width: '100%', height: 40 }} />
          </Stack>
        </Stack>
      </Card>
    </HugoThemeProvider>
  );
};
