import React, { useCallback } from 'react'
import { useStore } from '../../store'

import { Pagination } from 'antd'

const SearchPagination: React.FC = () => {
  const [store, useObserver] = useStore()

  const { setPageAndSize } = store.searchPagination

  const handleChange = useCallback(
    (page: number, pageSize?: number) => {
      setPageAndSize(page, pageSize!)
    },
    [setPageAndSize]
  )

  return useObserver(() => {
    const { pagination } = store.searchPagination
    const { size, total, page } = pagination

    return (
      <Pagination
        size="small"
        showQuickJumper={true}
        pageSize={size}
        current={page}
        total={total}
        onChange={handleChange}
      />
    )
  })
}

export default SearchPagination