Button

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

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

interface ButtonProps {
  children: React.ReactNode
  variant?: 'primary' | 'secondary' | 'ghost'
  size?: 'sm' | 'md' | 'lg'
  href?: string
  onClick?: () => void
  type?: 'button' | 'submit' | 'reset'
  disabled?: boolean
  className?: string
}

const variantClass: Record<NonNullable<ButtonProps['variant']>, string> = {
  primary: 'mdn-btn mdn-btn-solid',
  secondary: 'mdn-btn',
  ghost: 'mdn-btn mdn-btn-ghost',
}

const sizeClass: Record<NonNullable<ButtonProps['size']>, string> = {
  sm: 'mdn-btn-sm',
  md: '',
  lg: 'mdn-btn-lg',
}

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

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

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