import React from 'react'
import PropTypes from 'prop-types'
import { useThemeTokensCallback } from '../ThemeProvider/useThemeTokens'
import { LinkBase } from './LinkBase'
import { variantProp } from '../utils/props/variantProp'

/**
 * `TextButton` is a button that looks like a Link. It uses the same theming and variants as
 * Link but has the accessibility role of a `Button`. It should be used for actions that
 * take place on the current page, or for navigation within an app.
 */
export const TextButton = React.forwardRef(
  ({ onPress, children, variant, tokens, accessibilityRole = 'button', ...linkProps }, ref) => {
    const getTokens = useThemeTokensCallback('Link', tokens, variant)
    return (
      <LinkBase
        onPress={onPress}
        accessibilityRole={accessibilityRole}
        tokens={getTokens}
        ref={ref}
        {...linkProps}
      >
        {children}
      </LinkBase>
    )
  }
)

TextButton.displayName = 'TextButton'

TextButton.propTypes = {
  ...LinkBase.propTypes,
  /** onPress function */
  onPress: PropTypes.func.isRequired,
  /** Children node that can be added */
  children: PropTypes.node.isRequired,
  variant: variantProp.propType,
  /** Accesibility role for TextButton */
  accessibilityRole: PropTypes.string
}