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

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

const SKELETON_LENGTH = 4;

const SurveyListSkeleton = () => {
  return (
    <Stack sx={{ gap: 2 }}>
      {Array.from({ length: SKELETON_LENGTH }, (_, i) => (
        <CardContainer
          key={i}
          fullWidth
          padding={16}
          sx={{
            backgroundColor: theme =>
              theme.palette.new.background.layout.tertiary,
          }}
        >
          <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
            <Skeleton
              variant="circular"
              width={40}
              height={40}
            />
            <Skeleton
              width="100%"
              height={24}
            />
          </Stack>
        </CardContainer>
      ))}
    </Stack>
  );
};

export default SurveyListSkeleton;