import ListItemSkeleton from '@design-system/List/components/ListItemSkeleton';
import Stack, { type StackProps } from '@mui/material/Stack';
import { appearFromBottom } from '@utils/animations';

const baseStyles: StackProps['sx'] = {
  animation: `${appearFromBottom} 125ms ease-in-out backwards`,
  width: '100%',
  ml: -2,
};

const SkeletonList = ({ sx }: { sx?: StackProps['sx'] }) => {
  return (
    <Stack sx={{ ...sx }}>
      <ListItemSkeleton sx={baseStyles} />
      <ListItemSkeleton sx={baseStyles} />
      <ListItemSkeleton sx={baseStyles} />
      <ListItemSkeleton sx={baseStyles} />
      <ListItemSkeleton sx={baseStyles} />
    </Stack>
  );
};

export default SkeletonList;
