import React, { useRef } from "react";
import { useInfiniteLoading } from "../../hooks/useInfiniteLoading";


const JKMusicianList = ({ onPageChange }) => {

  const { items, hasNext, hasPrevious, loadNext, loadPrevious } = useInfiniteLoading({
    getItems: ({ page }) => { 
      /* Call API endpoint */ 
    
    }
  });

  return (
    <div>
        {hasPrevious && 
          <button onClick={() => loadPrevious()}>Load Previous</button>
        }
        <ul>
            {items.map(item => (
                <li key={item.id}>
                    {item.name}
                </li>
            ))}
        </ul>
        {hasNext && 
          <button onClick={() =>loadNext()}>Load More</button>
        }
    </div>
)
}

export default JKMusicianList;