Button

<Button variant="primary" size="md">Begin your consultation</Button>

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

type Variant = 'primary' | 'secondary' | 'ghost'
type Size = 'sm' | 'md' | 'lg'

const variantClass: Record<Variant, string> = {
  primary: 'btn-primary',
  secondary: 'btn-secondary',
  ghost: 'btn-ghost',
}

const sizeClass: Record<Size, string> = {
  sm: 'btn-sm',
  md: 'btn-md',
  lg: 'btn-lg',
}

interface ButtonBaseProps {
  variant?: Variant
  size?: Size
  children: React.ReactNode
  className?: string
}

interface ButtonAsLink extends ButtonBaseProps {
  href: string
  onClick?: never
}

interface ButtonAsButton extends ButtonBaseProps {
  href?: never
  onClick?: () => void
}

type ButtonProps = ButtonAsLink | ButtonAsButton

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

  if (href) {
    return (
      <Link href={href} className={classes}>
        {children}
      </Link>
    )
  }

  return (
    <button type="button" className={classes} onClick={onClick}>
      {children}
    </button>
  )
}