import { Button } from 'react-aria-components'
import LoadingDots from './LoadingDots'

/**
 * Renders a Button component with ARIA attributes for accessibility.
 *
 * @param {string} text - the text on the button
 * @param {function} onClick - a function to call when the button was clicked
 * @param {string} [className] - a class name to place on button element
 * @param {boolean} [isLoading] - if true the ui will show LoadingDots instead of the text
 * @param {boolean} [disabled] - if true the ui will show a disabled button
 * @param {Object} [restProps] - any other props that should be passed to the Button
 */

const ButtonAria = ({ text, onClick, className = '', isLoading, disabled, ...restProps }) => {
  return (
    <Button
      isDisabled={disabled}
      className={`${className} button truncate`}
      onClick={(e) => !disabled && onClick(e)}
      {...restProps}
    >
      <span className={`${isLoading ? 'text-hidden' : ''}`}>{text}</span>
      {isLoading && <LoadingDots />}
    </Button>
  )
}


export default ButtonAria
