import React from 'react'

import Box, { BoxProps } from '../box'
import { useStyleConfig, vui } from '../core'
import { cs } from '../utils'
import { usePaginationContext } from './context'

/** Displays '...' ellipsis for hidden pages. */
export const PaginationEllipsis = vui<'span', BoxProps>((props, ref) => {
  const { children, className, ...rest } = props
  const styles = useStyleConfig('Pagination', usePaginationContext())

  return (
    <Box
      alignItems="center"
      className={cs('vui-paginationEllipsis', className)}
      px="10px"
      ref={ref}
      {...styles.ellipsis}
      {...rest}
    >
      {children ?? '…'}
    </Box>
  )
})

PaginationEllipsis.displayName = 'PaginationEllipsis'
export default PaginationEllipsis
