import * as React from 'react';

import type { RichText } from '../../../types';

import { Jump } from './Jump/Jump';
import { Limits } from './Limits/Limits';
import { Pages } from './Pages/Pages';

export interface PaginationProps {
  /**
   * RichText with the summary of the pagination.
   *
   * @default undefined
   */
  summary?: RichText;
  /**
   * React node with pages buttons.
   *
   * @default undefined
   */
  pages: React.ReactNode;
  /**
   * React node for changing number of displayed rows.
   *
   * @default undefined
   */
  limits?: React.ReactNode;
  /**
   * React node for jumping to a specific page.
   *
   * @default undefined
   */
  jump?: React.ReactNode;
}

const PaginationComponent: React.FC<PaginationProps> = ({ summary, pages, limits, jump, ...rest }) => {
  return (
    <div className='pagination' {...rest}>
      <div className='pagination__founds'>{summary}</div>
      <div className='pagination__content'>
        {limits}
        {pages}
        {jump}
      </div>
    </div>
  );
};

export const Pagination = Object.assign(PaginationComponent, {
  Jump,
  Pages,
  Limits,
});