import { Button } from '@mui/material';
import CircularProgress from '@mui/material/CircularProgress';
import Image from 'next/image';

const LoadMore = ({ fetchNextPage, isFetchingNextPage, hasNextPage }) => {
  return (
    <Button
      onClick={fetchNextPage}
      startIcon={
        !isFetchingNextPage && (
          <Image
            src="/images/arrow.svg"
            alt="arrow down"
            width={29}
            height={29}
          />
        )
      }
      sx={{
        backgroundColor: 'primary.main',
        height: 50,
        width: 150,
        color: 'white',
        ':hover': {
          bgcolor: 'primary.main',
          color: 'white',
        },
      }}
    >
      {isFetchingNextPage && (
        <CircularProgress
          style={{
            color: '#fff',
            width: '29px',
            height: '29px',
            marginRight: '20px',
          }}
        />
      )}
      {isFetchingNextPage
        ? 'Loading...'
        : hasNextPage
        ? 'Load More'
        : 'Nothing more to load'}
    </Button>
  );
};

export default LoadMore;