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

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

import useHuGoTheme from 'src/hooks/useHuGoTheme';

type SidebarSkeletonProps = {
  width: string;
};

export const SidebarSkeleton = ({ width }: SidebarSkeletonProps) => {
  const HuGoThemeProvider = useHuGoTheme();

  const items = Array.from({ length: 12 }, (_, index) => index);

  return (
    <HuGoThemeProvider>
      <Stack sx={{ gap: 1.5, pt: 1.5 }}>
        {items.map(item => (
          <HuSkeleton
            key={item}
            width={width}
            height="49px"
            sx={{ borderRadius: 2 }}
            variant="rounded"
          />
        ))}
      </Stack>
    </HuGoThemeProvider>
  );
};
