Button

<Button variant="primary" size="md">Run experiment</Button>

import Link from 'next/link'
import { cn } from '@/lib/utils'

interface ButtonBaseProps {
  variant?:   'primary' | 'secondary' | 'ghost'
  size?:      'sm' | 'md' | 'lg'
  className?: string
  children:   React.ReactNode
}

type ButtonAsButton = ButtonBaseProps &
  Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps> & {
    href?: never
  }

type ButtonAsLink = ButtonBaseProps & {
  href: string
}

type ButtonProps = ButtonAsButton | ButtonAsLink

const SIZE_CLASSES: Record<NonNullable<ButtonBaseProps['size']>, string> = {
  sm: 'btn-sm',
  md: 'btn-md',
  lg: 'btn-lg',
}

const VARIANT_CLASSES: Record<NonNullable<ButtonBaseProps['variant']>, string> = {
  primary:   'btn-primary',
  secondary: 'btn-secondary',
  ghost:     'btn-ghost',
}

export function Button({
  children,
  variant   = 'primary',
  size      = 'md',
  className,
  ...props
}: ButtonProps): React.JSX.Element {
  const classes = cn('btn-base', SIZE_CLASSES[size], VARIANT_CLASSES[variant], className)

  if ('href' in props && props.href !== undefined) {
    const { href, ...linkProps } = props
    return (
      <Link href={href} className={classes} {...linkProps}>
        {children}
      </Link>
    )
  }

  const { type = 'button', ...buttonProps } = props as React.ButtonHTMLAttributes<HTMLButtonElement>
  return (
    <button type={type} className={classes} {...buttonProps}>
      {children}
    </button>
  )
}