import { skeletonClasses } from '@material-hu/mui/Skeleton';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

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

import { CONTENT_WIDTH } from '../constants';

const SurveySkeleton = () => {
  const theme = useTheme();

  return (
    <Stack sx={{ height: '100%' }}>
      <Stack
        sx={{
          bgcolor: theme.palette.new.background.elements.inverted,
          gap: 1,
          alignItems: 'center',
          p: 3,
          [`.${skeletonClasses.root}`]: {
            backgroundColor: theme.palette.new.background.elements.grey,
          },
        }}
      >
        <HuSkeleton
          height={23}
          width={134}
        />
        <HuSkeleton
          width={CONTENT_WIDTH}
          height={53}
        />
      </Stack>
      <Stack
        sx={{
          bgcolor: theme.palette.new.background.layout.default,
          pt: 6,
          flex: 1,
        }}
      >
        <Stack sx={{ alignItems: 'flex-start', margin: '0 auto', gap: 1.5 }}>
          <HuSkeleton
            height={32}
            width={80}
          />
          {Array.from({ length: 3 }).map((_, index) => (
            <HuSkeleton
              key={index}
              height={55}
              width={CONTENT_WIDTH}
            />
          ))}
        </Stack>
      </Stack>
      <Stack
        sx={{
          flexDirection: 'row',
          gap: 1,
          py: 2,
          backgroundColor: theme.palette.new.background.layout.tertiary,
          width: CONTENT_WIDTH,
          margin: '0 auto',
          justifyContent: 'flex-end',
        }}
      >
        <HuSkeleton
          height={55}
          width={176}
        />
      </Stack>
    </Stack>
  );
};

export default SurveySkeleton;
