import React from 'react'

import { useStyleConfig, vui } from '../core'
import T, { TProps } from '../t'
import { cs } from '../utils'
import { usePaginationContext } from './context'

/** Displays an action button within the Pagination. */
export const PaginationResults = vui<'span', TProps>((props, ref) => {
  const { children, className, ...rest } = props
  const { count, rangeEnd, rangeStart } = usePaginationContext()
  const styles = useStyleConfig('Pagination', usePaginationContext())

  return (
    <T className={cs('vui-paginationResults', className)} ref={ref} size="sm" {...styles.results} {...rest}>
      {children ?? `Showing ${rangeStart} to ${rangeEnd} of ${count} results.`}
    </T>
  )
})

PaginationResults.displayName = 'PaginationResults'

export default PaginationResults
