import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cn, surface, type SurfaceProps } from './cva'

export interface ButtonProps
  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'>,
    SurfaceProps {
  asChild?: boolean
}

const buttonStateClasses =
  'inline-flex min-h-[var(--mod-touch-min)] items-center justify-center gap-2 bg-[var(--mod-color-accent-9)] text-[var(--mod-color-accent-contrast)] hover:bg-[var(--mod-color-accent-10)] active:bg-[var(--mod-color-accent-11)] focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-[var(--mod-opacity-disabled)] aria-[busy=true]:cursor-progress aria-[busy=true]:opacity-[var(--mod-opacity-muted)]'

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ asChild, tone, radius, size, type, ...props }, ref) => {
    const Comp = asChild ? Slot : 'button'
    return (
      <Comp
        ref={ref}
        type={asChild ? type : (type ?? 'button')}
        className={cn(surface({ tone, radius, size }), buttonStateClasses)}
        {...props}
      />
    )
  },
)
Button.displayName = 'Button'