import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';

import { createBootstrapComponent } from './ThemeProvider';
import PageItem, { First, Prev, Ellipsis, Next, Last } from './PageItem';

/**
 * @property {PageItem} Item
 * @property {PageItem} First
 * @property {PageItem} Prev
 * @property {PageItem} Ellipsis
 * @property {PageItem} Next
 * @property {PageItem} Last
 */
class Pagination extends React.Component {
  static propTypes = {
    /** @default 'pagination' */
    bsPrefix: PropTypes.string.isRequired,

    /**
     * Set's the size of all PageItems.
     *
     * @type {('sm'|'lg')}
     */
    size: PropTypes.string,
  };

  render() {
    const { bsPrefix, className, children, size, ...props } = this.props;

    return (
      <ul
        {...props}
        className={classNames(
          className,
          bsPrefix,
          size && `${bsPrefix}-${size}`,
        )}
      >
        {children}
      </ul>
    );
  }
}

const DecoratedPagination = createBootstrapComponent(Pagination, 'pagination');

DecoratedPagination.First = First;
DecoratedPagination.Prev = Prev;
DecoratedPagination.Ellipsis = Ellipsis;
DecoratedPagination.Item = PageItem;
DecoratedPagination.Next = Next;
DecoratedPagination.Last = Last;

export default DecoratedPagination;

@@ -103,21 +103,18 @@
 mport %7B 
-creat
+us
 eBootstr
@@ -115,25 +115,22 @@
 ootstrap
-Component
+Prefix
  %7D from 
@@ -223,16 +223,218 @@
 Item';%0A%0A
+const propTypes = %7B%0A  /**%0A   * @default 'pagination'%0A   * */%0A  bsPrefix: PropTypes.string,%0A%0A  /**%0A   * Set's the size of all PageItems.%0A   *%0A   * @type %7B('sm'%7C'lg')%7D%0A   */%0A  size: PropTypes.string,%0A%7D;%0A%0A
 /**%0A * @
@@ -613,20 +613,20 @@
 st%0A */%0Ac
-lass
+onst
  Paginat
@@ -633,93 +633,32 @@
 ion 
-extends React.Component %7B%0A  static propTypes = %7B%0A    /** @default 'pagination' */%0A   
+= React.forwardRef(%0A  (%7B
  bsP
@@ -666,251 +666,132 @@
 efix
-: PropTypes.string.isRequired,%0A%0A    /**%0A     * Set's the size of all PageItems.%0A     *%0A     * @type %7B('sm'%7C'lg')%7D%0A     */%0A    size: PropTypes.string,%0A  %7D;%0A%0A  render() %7B%0A    const %7B bsPrefix, className, children, size, ...props %7D = this.props;%0A
+, className, children, size, ...props %7D, ref) =%3E %7B%0A    const decoratedBsPrefix = useBootstrapPrefix(bsPrefix, 'pagination');
 %0A   
@@ -810,16 +810,34 @@
     %3Cul%0A
+        ref=%7Bref%7D%0A
         
@@ -909,17 +909,26 @@
         
-b
+decoratedB
 sPrefix,
@@ -949,17 +949,26 @@
 e && %60$%7B
-b
+decoratedB
 sPrefix%7D
@@ -1042,102 +1042,49 @@
 %0A  %7D
-%0A%7D%0A%0Aconst DecoratedPagination = createBootstrapComponent(Pagination, 'pagination');%0A%0ADecorated
+,%0A);%0A%0APagination.propTypes = propTypes;%0A%0A
 Pagi
@@ -1105,25 +1105,16 @@
  First;%0A
-Decorated
 Paginati
@@ -1129,25 +1129,16 @@
 = Prev;%0A
-Decorated
 Paginati
@@ -1161,25 +1161,16 @@
 lipsis;%0A
-Decorated
 Paginati
@@ -1189,25 +1189,16 @@
 geItem;%0A
-Decorated
 Paginati
@@ -1213,25 +1213,16 @@
 = Next;%0A
-Decorated
 Paginati
@@ -1257,17 +1257,8 @@
 ult 
-Decorated
 Pagi

support for ref attribute (#4593)