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

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';

type ListLoadingProps = {
  skeletonsLength?: number;
};

export const ListLoading = ({ skeletonsLength = 3 }: ListLoadingProps) => {
  const skeletons = Array.from({ length: skeletonsLength });

  return (
    <Stack sx={{ gap: 2 }}>
      {skeletons.map((_, index) => (
        <HuCardContainer
          key={index}
          fullWidth
          padding={0}
        >
          <HuListItem loading={true} />
        </HuCardContainer>
      ))}
    </Stack>
  );
};