Button

<Button variant="primary" size="md">Start your subscription</Button>

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

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

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

interface ButtonAsButton extends ButtonBase {
  href?: undefined
  onClick?: () => void
  type?: 'button' | 'submit'
}

interface ButtonAsLink extends ButtonBase {
  href: string
  onClick?: undefined
  type?: undefined
}

type ButtonProps = ButtonAsButton | ButtonAsLink

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

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

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

  if ('href' in rest && rest.href) {
    return (
      <Link href={rest.href} className={classes}>
        {children}
      </Link>
    )
  }

  const { onClick, type } = rest as ButtonAsButton
  return (
    <button type={type ?? 'button'} onClick={onClick} className={classes}>
      {children}
    </button>
  )
}