import React from 'react'

import { ButtonBase } from './ButtonBase'
import { buttonPropTypes, textAndA11yText } from './propTypes'
import { a11yProps } from '../utils/props/a11yProps'
import { useButtonTokensCallback } from './useButtonTokensCallback'

export const Button = React.forwardRef(
  ({ accessibilityRole = 'button', tokens, variant, heightFull = true, ...props }, ref) => {
    const getTokens = useButtonTokensCallback('Button', tokens, variant)

    return (
      <ButtonBase
        {...props}
        tokens={getTokens}
        heightFull={heightFull}
        accessibilityRole={accessibilityRole}
        ref={ref}
      />
    )
  }
)
Button.displayName = 'Button'

Button.propTypes = {
  ...a11yProps.types,
  ...buttonPropTypes,
  children: textAndA11yText
}