import React, { useState } from 'react';
import './pagination.css';
import Pagination from "react-js-pagination";
import Iconsvg from '../../Ui/Icon/Icon'

type Props = {
    currentPage: number,
    recordPerPage: number,
    totalRecords: number,
    pageRange: number,
    rounded: boolean,
    handlePageChange: (event:any) => void;
}

const PaginationItem = (props:Props) => {

    const {currentPage, recordPerPage, totalRecords, pageRange,rounded,  handlePageChange} = props;
    const roundClass = rounded ?  "pagination-round" : ""

  return (
    <div className={`pagination-wrap ${roundClass}`}>
        <div>
            <b>Current Page:</b><span className="ml-2">{currentPage}</span>
        </div>

      <Pagination
        itemClass="page-item"
        linkClass="page-link"
        prevPageText={<Iconsvg name="paginationLeftArrow"/>}
        nextPageText={<Iconsvg name="paginationRightArrow"/>}
        firstPageText={<Iconsvg name="leftDoubleArrow"/>}
        lastPageText={<Iconsvg name="rightDoubleArrow"/>}
        activePage={currentPage}
        itemsCountPerPage={recordPerPage}
        totalItemsCount={totalRecords}
        pageRangeDisplayed={pageRange}
        onChange={handlePageChange}
      />
    </div>
  )
}

export default PaginationItem;