Button

<Button variant="primary" size="md">Save changes</Button>

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

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

interface ButtonProps {
  variant?:  Variant
  size?:     Size
  href?:     string
  type?:     'button' | 'submit' | 'reset'
  disabled?: boolean
  className?: string
  onClick?:  () => void
  children:  React.ReactNode
}

export function Button({
  variant   = 'primary',
  size      = 'md',
  href,
  type      = 'button',
  disabled,
  className,
  onClick,
  children,
}: ButtonProps): React.JSX.Element {
  const cls = cn('btn-base', `btn-${variant}`, `btn-${size}`, className)

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

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