import React from 'react';
import { createRoutesFromChildren } from 'react-router-dom';

const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {

  if(data.length){
    return (
      <div className='p-3 flex justify-center items-center space-x-2'>
        {/* Render pagination buttons */}
          {!prev &&
              <button
                className={`p-2 ${prev ? 'border' : null}`}
                name='prev'
                onClick={onClick}
              >
                <>&lt;</>
              </button>
            }

            {
              data.map((item, index)=>{
                  if(index%process.env.REACT_APP_ITEM_PER_PAGE == 0 && index >= start && index <= stop){
                  return (
                    <button
                      key={index}
                      value={index}
                      className={`p-2 ${index==start ? 'border' : null}`}
                      onClick={onClick}
                      name='page_num'
                      disabled={index == start}
                    >
                      {index <= 0 ? index+1 : (index/process.env.REACT_APP_ITEM_PER_PAGE)+1}
                    </button>
                  )
                }
              })
            }
            
            {!next &&
              <button
                className={`p-2 ${next ? 'border' : null}`}
                name='next'
                onClick={onClick}
              >
                <>&gt;</>
              </button>
            }
        </div>
    )
  }else{
    return null
  }
};

export default PaginatedList;