import * as React from 'react'
import {merge} from '@/lib/utils'
import {cva, VariantProps} from 'class-variance-authority'

export const buttonVariants = cva(
  [
    `transition-all duration-200 ease-in-out`,
    `h-10 px-4 rounded-md cursor-pointer whitespace-nowrap`,
    'inline-flex items-center justify-center gap-2',
    '[&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 ',
    'outline-none focus-visible:ring-4 ring-blue-200',
    'disabled:pointer-events-none disabled:opacity-50 ',
    'aria-invalid:ring-fail/20 dark:aria-invalid:ring-fail/40 aria-invalid:border-fail',
  ],
  {
    variants: {
      theme: {
        gradient: 'bg-gradient-to-r from-blue-400 to-cyan-300 text-white ring-offset-2',
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        outline: 'border bg-background hover:bg-secondary hover:text-secondary-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        ghost: 'text-foreground bg-transparent',
        accent: 'bg-accent text-accent-foreground hover:bg-accent/90',
        fail: 'bg-fail text-white hover:bg-fail/90',
        warn: '',
        done: '',
      },
      color: {
        plain: '',
        primary: '',
        secondary: '',
        accent: '',
        done: '',
        warn: '',
        fail: '',
      },
    },
    compoundVariants: [
      {
        theme: 'ghost',
        color: 'plain',
        className: 'hover:bg-plain/10',
      },
      {
        theme: 'ghost',
        color: 'primary',
        className: 'hover:bg-primary/10 text-primary',
      },
      {
        theme: 'ghost',
        color: 'secondary',
        className: 'hover:bg-secondary/10 text-secondary',
      },
      {
        theme: 'ghost',
        color: 'accent',
        className: 'hover:bg-accent/10 text-accent',
      },
      {
        theme: 'ghost',
        color: 'done',
        className: 'hover:bg-done/10 text-done',
      },
      {
        theme: 'ghost',
        color: 'warn',
        className: 'hover:bg-warn/10 text-warn',
      },
      {
        theme: 'ghost',
        color: 'fail',
        className: 'hover:bg-fail/10 text-fail',
      },
    ],
    defaultVariants: {
      theme: 'default',
      color: 'plain',
    },
  },
)

type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants>

export function Button(rawProps: ButtonProps) {
  const {className, theme, color, ...props} = rawProps
  return (
    <button
      {...props}
      className={merge(buttonVariants({theme, color}), className)}
    />
  )
}