import styles from "./styles.module.scss"
import classNames from 'classnames'

type ButtonProps = {
  size: 'lg' | 'md'
  schema?: 'base' | 'shade' | 'contrast'
  type?: "button" | "submit" | "reset",
  href?: string,
  target?: "_blank" | "_self"
  children: React.ReactNode,
  disabled?: boolean,
  onClick?: () => void,
}

export function Button(
  {
    type = "button",
    schema = 'base',
    size,
    children,
    onClick,
    href,
    disabled = false,
    target = "_self"
  }: ButtonProps
) {
  const style = classNames({
    [styles.button]: true,
    [styles.base]: schema ==  'base',
    [styles.contrast]: schema ==  'contrast',
    [styles.shade]: schema ==  'shade',
    [styles.lg]: size === 'lg',
    [styles.md]: size === 'md',
  });

  if(href) {
    return <a
      href={href}
      onClick={onClick}
      className={style}
      target={target}
    >
      {children}
    </a>
  }

  return (
    <button
      type={type}
      onClick={onClick}
      className={style}
      disabled={disabled}
    >
      {children}
    </button>
  )
}