import React from 'react'
import classnames from 'classnames'
import { node, string, oneOfType, object, array, bool } from 'prop-types'

const PaginationItem = ({ active, children, className, disabled, onPageChange, page }) => {
  const buttonStyles = classnames('sw-pagination-item', className, { active })

  const changePage = () => onPageChange(page)

  return (
    <button className={buttonStyles} disabled={disabled} onClick={changePage}>
      {children}
    </button>
  )
}

PaginationItem.propTypes = {
  /** Pagination Item Content */
  children: node,
  /** Additional externs classnames */
  className: oneOfType([string, object, array]),
  /** Determine if button is disabled */
  disabled: bool,
  /** Determine if item is currently active */
  active: bool
}

PaginationItem.defaultProps = {
  disabled: false,
  selected: false
}

PaginationItem.displayName = 'PaginationItem'

export default PaginationItem