import React from 'react'
//@ts-ignore
import scss from './Button.module.scss'
import { ButtonProps } from './Button.types'
import { _getClassNames } from '../../util/getClassNames'

/** This is a special button */
export const Button = ({
  children,
  primary,
  scale,
  weight,
  href,
  onClick,
  disabled,
  ...props
}: ButtonProps) => {
  //const defaultProps = { children: 'Button', size: 'XL', ...props } as ButtonProps

  const getClassNames = () => {
    let className = _getClassNames(scss.button, scss, scale, weight, disabled)
    if (primary) {
      className.push(scss.primary)
    }

    return className.join(' ')
  }

  return (
    <button
      data-testid={'button'}
      onClick={(e: any) => {
        if (disabled) return
        if (onClick) onClick(e)
        if (href) window.open(href, '_blank')
      }}
      className={getClassNames()}
      {...props}
    >
      {children}
    </button>
  )
}