import Button from '../button'
import { useStyleConfig, vui } from '../core'
import { cs } from '../utils'
import { usePaginationContext } from './context'
import { PaginationButtonProps } from './pagination.types'

/** Displays a page navigation button within the Pagination. */
export const PaginationButton = vui<'button', PaginationButtonProps>((props, ref) => {
  const { className, isActive: isActiveProp, page: pageProp, ...rest } = props
  const { onPageChange, page } = usePaginationContext()
  const styles = useStyleConfig('Pagination', usePaginationContext())

  const isActive = isActiveProp ?? pageProp === page
  const activeProps = isActive
    ? {
        bg: 'skyBlue.85',
      }
    : {}

  return (
    <Button
      className={cs('vui-paginationButton', className)}
      onClick={() => onPageChange(pageProp)}
      ref={ref}
      size="sm"
      text={pageProp}
      variant="text"
      {...styles.button}
      {...activeProps}
      {...rest}
    />
  )
})

PaginationButton.displayName = 'PaginationButton'

export default PaginationButton
