import { FC } from 'react';

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

import { InfiniteList } from 'src/components/list';

type Props = {
  isSuccess: boolean;
  isLoading: boolean;
  isEmpty: boolean;
  fetchNextPage: any;
  hasNextPage: boolean;
  isFetchingNextPage: boolean;
};

const UserInfiniteList: FC<Props> = ({
  isSuccess,
  isLoading,
  isEmpty,
  fetchNextPage,
  isFetchingNextPage,
  hasNextPage,
}) => {
  return (
    <InfiniteList
      isSuccess={isSuccess}
      isLoading={isLoading}
      isEmpty={isEmpty}
      fetchNextPage={fetchNextPage}
      hasNextPage={hasNextPage}
      isFetchingNextPage={isFetchingNextPage}
      renderSkeleton={
        <Stack
          sx={{
            flexDirection: 'row',
            gap: 1,
            alignItems: 'center',
            px: 2,
            py: 1,
          }}
        >
          <Skeleton
            animation="wave"
            height={25}
            width={18}
            style={{ borderRadius: 1 }}
          />
          <Skeleton
            animation="wave"
            variant="circular"
            height={32}
            width={32}
          />
          <Skeleton
            animation="wave"
            height={22}
            style={{ borderRadius: 2 }}
            width="100%"
          />
        </Stack>
      }
    >
      <div />
    </InfiniteList>
  );
};

export default UserInfiniteList;
