import React from "react"
import PropTypes from "prop-types"
import SelectMenu from "../../select-menu"

export default function PerPageSelect({
  value,
  onSelect,
  options: perPageOptions = [10, 25, 50],
}) {
  const options = perPageOptions.includes(value)
    ? perPageOptions
    : perPageOptions.concat(value).toSorted((a, b) => a - b)

  return (
    <SelectMenu
      aria-label="Results per page"
      value={value}
      onChange={(event) => onSelect(event.target.value)}
      options={options.map((option) => ({
        value: option,
        label: `${option} per page`,
      }))}
    />
  )
}

PerPageSelect.propTypes = {
  value: PropTypes.number.isRequired,
  onSelect: PropTypes.func.isRequired,
  options: PropTypes.arrayOf(PropTypes.number),
}
