Button

<Button variant="primary" size="md">Get started</Button>

import type * as React from 'react'
import Link from 'next/link'
import { cn } from '@/lib/utils'

type ButtonVariant = 'primary' | 'secondary' | 'ghost'
type ButtonSize    = 'sm' | 'md' | 'lg'

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

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

  if (href) {
    if (disabled) {
      return (
        <a
          href={href}
          className={cn(cls, 'opacity-50 cursor-not-allowed pointer-events-none')}
          aria-disabled="true"
          tabIndex={-1}
          onClick={(e) => e.preventDefault()}
        >
          {children}
        </a>
      )
    }
    if (external) {
      return (
        <a href={href} className={cls} target="_blank" rel="noopener noreferrer">
          {children}
        </a>
      )
    }
    return (
      <Link href={href} className={cls}>
        {children}
      </Link>
    )
  }

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