import { cx } from 'class-variance-authority'

import { TextLinkProps } from '../TextLink/types'
import { getTextLinkClasses } from './textLinkStyles'

import styles from './textLinkButton.module.css'

export type TextLinkButtonProps = {
  theme?: TextLinkProps['theme']
  typography?: TextLinkProps['typography']
  isDisabled?: TextLinkProps['isDisabled']
  isInline?: TextLinkProps['isInline']
} & React.ButtonHTMLAttributes<HTMLButtonElement>

/* A Button with the same styling as a TextLink to handle an edge case. */
export function TextLinkButton({
  theme,
  isDisabled,
  isInline,
  typography,
  className,
  ...props
}: TextLinkButtonProps) {
  const classNames = getTextLinkClasses({
    theme,
    isDisabled,
    isInline,
    typography,
    className,
  })

  return (
    <button
      {...props}
      type="button"
      disabled={isDisabled}
      className={cx(classNames, styles.button)}
    />
  )
}