Button

<Button variant="primary" size="md">Deploy</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
  disabled?: boolean
  type?:     'button' | 'submit' | 'reset'
  onClick?:  () => void
  className?: string
  children:  React.ReactNode
}

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

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

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

  if (href) {
    if (disabled) {
      return (
        <span className={classes} aria-disabled="true">
          {children}
        </span>
      )
    }
    return (
      <Link href={href} className={classes} onClick={onClick}>
        {children}
      </Link>
    )
  }

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