import { times } from 'lodash-es';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';

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

const EvaluationQuestionsSkeleton = () => {
  return (
    <Stack sx={{ gap: 2 }}>
      {times(3, index => (
        <Stack
          key={index}
          sx={{ gap: 1 }}
        >
          <HuSkeleton
            width="100%"
            height={18}
          />
          <HuSkeleton
            width="100%"
            height={18}
          />
          <HuSkeleton
            width="25%"
            height={18}
          />
          <Stack sx={{ gap: 1.5, my: 1 }}>
            <HuSkeleton
              width="100%"
              height={76}
            />
            <HuSkeleton
              width="100%"
              height={76}
            />
          </Stack>
          <Divider sx={{ my: 0.5 }} />
        </Stack>
      ))}
    </Stack>
  );
};

export default EvaluationQuestionsSkeleton;
