import { Stack } from '@mui/material';
import { times } from 'lodash';

import Skeleton from '../../../../design-system/Skeleton';

const SubSidebarAccordionsSkeleton = () => {
  return (
    <Stack>
      {times(4, index => (
        <Stack
          key={index}
          sx={{
            gap: 2,
            mt: 1,
            p: 2,
            alignItems: 'center',
            flexDirection: 'row',
          }}
        >
          <Skeleton
            height={40}
            width={40}
          />
          <Skeleton
            height={32}
            width={180}
          />
        </Stack>
      ))}
    </Stack>
  );
};

export default SubSidebarAccordionsSkeleton;
