import { cva, type VariantProps } from 'class-variance-authority'
import { splitProps, type JSX } from 'solid-js'
import { cn } from '@/utils/cn'

export const buttonVariants = cva(
  'inline-flex items-center justify-center gap-2 text-sm font-bold uppercase tracking-wider transition-all duration-100 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-40 relative overflow-hidden border-3',
  {
    variants: {
      variant: {
        primary:
          'bg-primary text-on-primary border-primary shadow-brutal hover:shadow-brutal-hover hover:translate-x-[-4px] hover:translate-y-[-4px] active:translate-x-0 active:translate-y-0 active:shadow-brutal-sm',
        secondary:
          'bg-fg text-surface border-fg shadow-brutal-outline hover:shadow-brutal-hover hover:translate-x-[-4px] hover:translate-y-[-4px] active:translate-x-0 active:translate-y-0',
        ghost: 'bg-transparent text-fg border-outline hover:bg-surface-container hover:border-fg active:bg-surface-high',
        subtle: 'bg-surface-container text-fg border-outline hover:border-fg active:bg-surface-high',
        danger: 'bg-danger text-on-danger border-danger shadow-brutal hover:shadow-brutal-hover hover:translate-x-[-4px] hover:translate-y-[-4px]',
        accent: 'bg-transparent text-primary border-primary hover:bg-primary hover:text-on-primary',
      },
      size: {
        sm: 'h-10 px-4 text-xs',
        md: 'h-12 px-6 text-sm',
        lg: 'h-16 px-8 text-base',
        icon: 'h-12 w-12',
      },
    },
    defaultVariants: {
      variant: 'primary',
      size: 'md',
    },
  },
)

export interface ButtonProps
  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

export const Button = (props: ButtonProps) => {
  const [local, rest] = splitProps(props, ['class', 'variant', 'size'])

  return (
    <button
      class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}
      {...rest}
    />
  )
}
