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)}
    />
  )
}