import React from "react"
import PropTypes from "prop-types"

export default function PageCount({
  children,
  page,
  perPage,
  pageSize,
  total
}) {
  return (
    <div className="font-semibold text-sm text-gray-800">
      {children ||
        `${(page - 1) * perPage + 1} - ${(page - 1) * perPage +
          pageSize} of ${total}`}
    </div>
  )
}

PageCount.propTypes = {
  // Pass children instead of the other props to override what is rendered
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ]),
  // What page we're currently on
  page: PropTypes.number,
  // How many records are shown on a page (at most)
  perPage: PropTypes.number,
  // How many records are shown on this page (could be less than perPage)
  pageSize: PropTypes.number,
  // How many records are there total across all pages
  total: PropTypes.number
}
