import React, { Children } from "react"
import PropTypes from "prop-types"
import PageCount from "./pagination/page-count"
import PerPageSelect from "./pagination/per-page-select"
import Navigation from "./pagination/navigation"

export default function Pagination({ children }) {
  const { pageCountSlot, perPageSelectSlot, navigationSlot } = Children.toArray(
    children
  ).reduce((slots, child) => {
    if (child.type === PageCount) {
      slots.pageCountSlot = child
    } else if (child.type === PerPageSelect) {
      slots.perPageSelectSlot = child
    } else if (child.type === Navigation) {
      slots.navigationSlot = child
    }
    return slots
  }, {})

  return (
    <div className="flex items-center justify-between gap-1 border-t border-gray-200 mt-4 py-4">
      {pageCountSlot}
      <div className="flex items-center gap-4 ml-auto">
        {perPageSelectSlot}
        {navigationSlot}
      </div>
    </div>
  )
}

Pagination.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]).isRequired,
}

Pagination.PageCount = PageCount
Pagination.PerPageSelect = PerPageSelect
Pagination.Navigation = Navigation
