import Link from 'next/link'
import clsx from 'clsx'

const baseStyles = {
  solid:
    'group inline-flex items-center justify-center rounded-sm py-2 px-6 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2',
  outline:
    'group inline-flex ring-1 items-center justify-center rounded-sm py-2 px-6 text-sm',
}

const variantStyles = {
  solid: {
    slate:
      'bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900',
    black:
      'bg-black text-white hover:bg-gray-800 hover:text-white active:bg-gray-900 active:text-gray-100 focus-visible:outline-black',
    blue:
      'bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600',
    green:
      'bg-green text-void hover:bg-green/90 hover:text-void active:bg-green/80 active:text-void focus-visible:outline-green',
    white:
      'bg-white text-black hover:bg-gray-100 hover:text-black active:bg-gray-200 active:text-gray-800 focus-visible:outline-white',
    radial:
      'text-white hover:opacity-90 active:opacity-80 focus-visible:outline-blue-600',
  },
  outline: {
    slate:
      'ring-slate-200 text-slate-700 hover:text-slate-900 hover:ring-slate-300 active:bg-slate-100 active:text-slate-600 focus-visible:outline-blue-600 focus-visible:ring-slate-300',
    white:
      'ring-white text-white hover:ring-slate-500 active:ring-slate-900 active:text-slate-400 focus-visible:outline-white',
    green:
      'ring-green text-void hover:ring-green/90 hover:text-void active:ring-green/80 active:text-void focus-visible:outline-green',
  },
}

type ButtonProps = (
  | {
      variant?: 'solid'
      color?: keyof typeof variantStyles.solid
    }
  | {
      variant: 'outline'
      color?: keyof typeof variantStyles.outline
    }
) &
  (
    | Omit<React.ComponentPropsWithoutRef<typeof Link>, 'color'>
    | (Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> & {
        href?: undefined
      })
  )

export function Button({ className, ...props }: ButtonProps) {
  props.variant ??= 'solid'
  props.color ??= 'slate'

  const isRadial = props.variant === 'solid' && props.color === 'radial'
  
  className = clsx(
    baseStyles[props.variant],
    props.variant === 'outline'
      ? variantStyles.outline[props.color]
      : props.variant === 'solid'
        ? variantStyles.solid[props.color]
        : undefined,
    className,
  )

  const style = isRadial ? {
    background: 'radial-gradient(circle, #1b1a86 0%, #000000 100%)'
  } : undefined

  return typeof props.href === 'undefined' ? (
    <button className={className} style={style} {...props} />
  ) : (
    <Link className={className} style={style} {...props} />
  )
}
