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

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

import useHuGoTheme from 'src/hooks/useHuGoTheme';

const ITEM_COUNT = 25;

type SidebarSkeletonProps = {
  isCollapsed?: boolean;
  navbarHeight?: number;
};

const SidebarSkeleton = ({
  isCollapsed = false,
  navbarHeight = 64,
}: SidebarSkeletonProps) => {
  const HuGoThemeProvider = useHuGoTheme();
  const items = Array.from({ length: ITEM_COUNT }, (_, i) => i);

  return (
    <HuGoThemeProvider>
      <Stack
        sx={{
          gap: 1.5,
          pt: 1.5,
          px: isCollapsed ? 0.5 : 1,
          overflow: 'hidden',
          // Subtract navbar + sidebar internal footer (~56px) + bottom padding
          maxHeight: `calc(100vh - ${navbarHeight}px - 80px)`,
        }}
      >
        {items.map(item => (
          <HuSkeleton
            key={item}
            width={isCollapsed ? '40px' : '100%'}
            height="44px"
            sx={{ borderRadius: 2, flexShrink: 0 }}
            variant="rounded"
          />
        ))}
      </Stack>
    </HuGoThemeProvider>
  );
};

export default SidebarSkeleton;