import React from 'react';
import { usePaginationContext } from './pagination-context';
import { PaginationItem } from './pagination-item';

export type PaginationNextProps = React.ButtonHTMLAttributes<any>;

export const PaginationNext: React.FC<React.PropsWithChildren<PaginationNextProps>> = ({ children, ...props }) => {
  const { currentPage, isLast, update, resolveUrl } = usePaginationContext();
  const href = isLast ? undefined : resolveUrl(currentPage + 1);
  return (
    <PaginationItem
      className="pagination-next"
      disabled={isLast} aria-disabled={isLast}
      aria-label="next page"
      onClick={() => update && update('next')}
      href={href}
      rel={href && 'next'}
      {...props}
    >
      {children}
    </PaginationItem>
  );
};

PaginationNext.displayName = 'PaginationNext';