// components/Pagination.jsx

/**
 * Pagination Component
 *
 * Displays pagination controls for navigating through multiple pages of content.
 */

// No imports needed as PropTypes is loaded via script tag
// and React is available globally

function Pagination({ currentPage, totalPages, onPageChange }) {
  return (
    <nav className="pagination-nav" aria-label="Course pagination">
      <button
        className="pagination-button"
        onClick={() => onPageChange(currentPage - 1)}
        disabled={currentPage <= 1}
        aria-label="Go to previous page"
      >
        Previous
      </button>

      <span className="pagination-info">
        Page {currentPage} of {totalPages}
      </span>

      <button
        className="pagination-button"
        onClick={() => onPageChange(currentPage + 1)}
        disabled={currentPage >= totalPages}
        aria-label="Go to next page"
      >
        Next
      </button>
    </nav>
  );
}

Pagination.propTypes = {
  currentPage: PropTypes.number.isRequired,
  totalPages: PropTypes.number.isRequired,
  onPageChange: PropTypes.func.isRequired,
};

// Make Pagination available globally
window.Pagination = Pagination;