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

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

const SKELETON_ITEMS = [0, 1, 2];

export const ProductListSkeleton = () => (
  <Stack sx={{ gap: 2 }}>
    {SKELETON_ITEMS.map(item => (
      <CardContainer
        key={item}
        fullWidth
        padding={0}
      >
        <ListItem
          loading
          slotProps={{ avatar: { size: 'large' } }}
        />
      </CardContainer>
    ))}
  </Stack>
);

export default ProductListSkeleton;
