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

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

export function Button(
  {
    type = "button",
    schema = 'base',
    size,
    children,
    onClick,
    href
  }: ButtonProps
) {
  if(href) {
    return <a
      href={href}
      onClick={onClick}
      className={classNames({
        [styles.button]: true,
        [styles.base]: schema ==  'base',
        [styles.contrast]: schema ==  'contrast',
        [styles.lg]: size === 'lg',
        [styles.md]: size === 'md',
      })}
    >
      {children}
    </a>
  }

  return (
    <button
      type={type}
      onClick={onClick}
      className={classNames({
        [styles.button]: true,
        [styles.base]: schema ==  'base',
        [styles.contrast]: schema ==  'contrast',
        [styles.lg]: size === 'lg',
        [styles.md]: size === 'md',
      })}
    >
      {children}
    </button>
  )
}