import { FC } from 'react';

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

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

const list = Array.from(Array(5).keys());

export const SidebarSkeleton: FC = () => {
  return (
    <Stack
      sx={{
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'center',
        width: '100%',
        gap: 5,
        py: 3,
        px: 1,
      }}
    >
      <HuSkeleton
        width={67}
        height={28}
      />
      <Stack
        sx={{
          flexDirection: 'column',
          width: '100%',
          gap: 2.5,
          px: 1.5,
        }}
      >
        {list.map(item => (
          <Stack
            key={item}
            sx={{
              flexDirection: 'row',
              width: '100%',
              gap: 1,
            }}
          >
            <HuSkeleton
              width={22}
              height={22}
            />
            <HuSkeleton
              width="100%"
              height={22}
            />
          </Stack>
        ))}
      </Stack>
    </Stack>
  );
};

export default SidebarSkeleton;